CSS - Vertical line between bullets in an unordered list

Question

How would I go about drawing a vertical line between the bullets in an unordered list, like so:

Notice that the line stops at the last list bullet. I\'m usi

Answer 1

I doubt that this is achievable using just borders and "fiddling with margins" as others have suggested, at least I've had no luck in doing so.

This solution uses CSS-generated content (:before and :after) to draw bullets and lines. It allows for a high degree of customization and it keeps the markup clean, but note the browser support.

JSFiddle (scroll through CSS until the /* BORDERS AND BULLETS */ comment)

ul.experiences li {
    position:relative; /* so that pseudoelements are positioned relatively to their "li"s*/
    /* use padding-bottom instead of margin-bottom.*/ 
    margin-bottom: 0; /* This overrides previously specified margin-bottom */
    padding-bottom: 2.5em;
}

ul.experiences li:after {
    /* bullets */
    content: url('http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/RedDisc.svg/20px-RedDisc.svg.png');
    position: absolute;
    left: -26px; /*adjust manually*/
    top: 0px;
}

ul.experiences li:before {
    /* lines */
    content:"";
    position: absolute;
    left: -16px; /* adjust manually */
    border-left: 1px solid black;
    height: 100%;
    width: 1px;
}

ul.experiences li:first-child:before {
   /* first li's line */
   top: 6px; /* moves the line down so that it disappears under the bullet. Adjust manually */
}

ul.experiences li:last-child:before {
    /* last li's line */
   height: 6px; /* shorten the line so it goes only up to the bullet. Is equal to first-child:before's top */
}

NOTE: if the line's border-color has an alpha-channel specified, the overlap between first and second elements' borders will be noticeable.