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

Probably a bit old now but here is a way you can do this. It requires a bit more markup to create styles and control the heights of elements (I used spans but you can use tags ):

ol,
ul {
  list-style: none;
}
li {
  display: flex;
  flex-flow: row;
  min-height: 100px;
  position: relative;
}
span.number {
  margin-right: 100px;
  text-align: center;
  width: 1em;
  height: 1em;
  background-color: red;
  border-radius: 50%;
  z-index: 1;
}
span.line {
  position: absolute;
  height: 100%;
  border: solid black 0.1em;
  top: 0.5em;
  left: 0.45em;
}
li:last-child span.line {
  display: none;
}
}
span.blob {}

  
1
    
Hello
  
  
2
    
Goodbye
  

http://jsfiddle.net/efava0je/