graphic_dev graphic_dev - 1 year ago 276
CSS Question

CSS - Vertical line between bullets in an unordered list

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

enter image description here

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

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>


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 {
background: url('../img/misc/list-bullet-green.png') no-repeat;
ul.experiences {
background: url('../img/misc/list-bullet-blue.png') no-repeat;
ul.experiences {
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;
} {
background-color: #c4df9b;
} {
background-color: #6dcff6;
} {
background-color: #f06eaa;
.when {
float: right;
color: #b9b9b9;
font-style: italic;
.description {
display: block;
margin-top: 0.5em;

Answer Source

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('');
    position: absolute;
    left: -26px; /*adjust manually*/
    top: 0px;

ul.experiences li:before {
    /* lines */
    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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download