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

Since there aren't many good answers here, I figured I'd add my solution:

I take advantage of position relative and include a white mask on the last item to hide the overflow. Works in mobile view and variation of the item heights.

HTML

    


    

        
1
        

            
ITEM
            
Text
        
    

    

        
2
        

            
ITEM
            
Text
        
    

    

        
3
        

            
ITEM
            
Text
        
        

    

CSS

.list-wrapper {
  position:relative;
}
.list-item-wrapper {
  margin-top:10px;
  position:relative;
}
.list-bullet {
  float:left;
  margin-right:20px;
  background:#FF4949;
  height:30px;
  width:30px;
  line-height:30px;
  border-radius:100px;
  font-weight:700;
  color:white;
  text-align:center;
}
.list-item {
  display:table-row;
  vertical-align:middle;
}
.list-title {
    font-weight:700;
}
.list-text {
    font-weight:400;
}
.red-line {
  background:#FF4949;
  z-index:-1;
  width:1px;
  height:100%;
  position:absolute;
  left:15px;
}
.white-line {
  background:#FFF;
  z-index:-1;
  top:0px;
  width:1px;
  height:100%;
  position:absolute;
  left:15px;
}

DEMO http://jsfiddle.net/cfzsgkyn/