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 using list-style:none; and images as bullets. The HTML looks like this:

<ul class="experiences">    <!-- Experience -->   <li class="green">     <div class="where">New York Times</div>     <h3 class="what green">Senior Online Editor</h3>     <div class="when">2012 - Present</div>      <p class="description">Jelly-o pie chocolate cake...</p>    </li>     ... 

CSS code as requested:

/* Experiences */ ul.experiences {     padding-left: 15px;     margin-top: -1px; } ul.experiences li {     padding-left: 33px;     margin-bottom: 2.5em;     list-style: none;     background: url('../img/misc/list-bullet-darkgray.png') no-repeat; } ul.experiences li.green {     background: url('../img/misc/list-bullet-green.png') no-repeat; } ul.experiences li.blue {     background: url('../img/misc/list-bullet-blue.png') no-repeat; } ul.experiences li.pink {     background: url('../img/misc/list-bullet-pink.png') no-repeat; } .where {     font-size: 1.2857em; /* 18/16 -> 18px */     font-weight: 300;     display: inline;     margin-right: 0.5em; } .what {     font-size: 0.75em; /* 12/16 -> 12px */     font-weight: 700;     text-transform: uppercase;     color: #fff;     background-color: #444444;     display: inline-block;     padding: 0 12px;     margin: -5px 0.5em 0 0 !important;     -webkit-border-radius: 3px;     -moz-border-radius: 3px;     border-radius: 3px; } .what.green {     background-color: #c4df9b; } .what.blue {     background-color: #6dcff6; } .what.pink {     background-color: #f06eaa; } .when {     float: right;     color: #b9b9b9;     font-style: italic; } .description {     display: block;     margin-top: 0.5em; } 

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.