CODEWITHSUNDEEP
htmlcss
Alexxio
Alexxio

Reputation: 1101

horizontal line with dots between them

Can I achieve this without using <hr>? I want the horizontal and vertical lines with the dots. This is what I did for the horizontal one and it doesn't look nice am not sure how to do the vertical one even. Add a fiddle please.

enter image description here

<div class="horizontaltop" runat="server"></div>
<div align="center">...</div>
<div class="horizontalRule" runat="server"></div>


div.horizontaltop{
    clear:both;
    width:100%;
    background-color:#d1d1d1;
    height:1px;
    margin-top:10px;
    margin-bottom:0px;
}
div.horizontalRule{
    clear:both;
    width:100%;
    background-color:#d1d1d1;
    height:1px;
    margin-top:1px;
    margin-bottom:1px;
}

Upvotes: 2

Views: 1504

Answers (2)

Steve Sanders
Steve Sanders

Reputation: 8651

This is pretty straightforward with pseudo elements:

http://jsfiddle.net/Es4wY/1/

<div class="dotted-border">Your content</div>

.dotted-border {
    border-bottom: 1px solid #d1d1d1;
}

.dotted-border:after {
    border-top: 1px solid #d1d1d1;
    content: "\2022\2022\2022";
    display: block;
    font-size: 8px;
    letter-spacing: 3px;
    text-align: center;
}

Edit - here's a vertical one. The css is not quite as pretty, but it works. http://jsfiddle.net/b5U5M/1/

.dotted-border-vertical {
    border-right: 1px solid #d1d1d1;
    height: 200px;
    position: relative;
}

.dotted-border-vertical:after {
    border-left: 1px solid #d1d1d1;
    content: "\2022\A\2022\A\2022";
    display: inline-block;
    font-size: 8px;
    height: 120px;
    line-height: 0.8;
    padding-top: 80px;
    position: absolute; right: 0; top: 0;
    text-align: center;
    width: 5px;
}

Upvotes: 6

dthree
dthree

Reputation: 20730

Add a class dots to the center div, and add the following CSS:

div.dots {
  border-bottom: 3px dotted #aaa;   
  width: 20px;
}

That will give you more authentic dots, and you can mess with the sizing and color. You'll then want to wrap .dots in a parent div that centers it.

Upvotes: 0

Related Questions