How to draw a vertical, dotted line down center of page using CSS?

Question

I'd like to draw a dotted line, vertically down the center of my page, "hiding" under any content boxes along the way... Is there a technique to do this in CSS, or will I have to use a repeating image?

Answer 1

This gives you dots: http://jsfiddle.net/NBMRp/

body:after {
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dotted #444; /*change these values to suit your liking*/
}

They're just not that pretty.

Answer 2

For the dotted line i would use:

.vertical_dotted_line
{
    border-left: 1px dotted black;
    height: 100px;
} 

<div class="vertical_dotted_line"></div>

And to make it under other elements you need to play with the z-index of your dotted line div and the other divs (they should have a higher value of z-index)

Answer 3

If you wants the lines should extend out of div's height -

.dashed-lines:after {
content:"";
position: absolute;
z-index: -1;
top: -50px;
bottom: -50px;
left: 50%;
border-left: 2px dotted #ce9b3a;

}