Add a pipe separator after items in an unordered list unless that item is the last on a line

Question

Is it possible to style this html ...

    
Dogs
    
Cats
    
Lions
    
Tig         


        

Answer 1

I came across a solution today that does not appear to be here already and which seems to work quite well so far. The accepted answer does not work as-is on IE10 but this one does. http://codepen.io/vithun/pen/yDsjf/ credit to the author of course!

.pipe-separated-list-container {
  overflow-x: hidden;
}
.pipe-separated-list-container ul {
  list-style-type: none;
  position: relative;
  left: -1px;
  padding: 0;
}
.pipe-separated-list-container ul li {
  display: inline-block;
  line-height: 1;
  padding: 0 1em;
  margin-bottom: 1em;
  border-left: 1px solid;
}

  

    
One
    
Two
    
Three
    
Four
    
Five
    
Six
    
Seven
    
Eight
    
Nine
    
Ten
    
Eleven
    
Twelve
    
Thirteen
    
Fourteen
    
Fifteen
    
Sixteen
    
Seventeen
    
Eighteen
    
Nineteen
    
Twenty
    
Twenty One
    
Twenty Two
    
Twenty Three
    
Twenty Four
    
Twenty Five
    
Twenty Six
    
Twenty Seven
    
Twenty Eight
    
Twenty Nine
    
Thirty