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 know I'm a bit late to the party, but if you can put up with having the lines left-justified, one hack is to put the pipes before the items and then put a mask over the left edge, basically like so:

li::before {
  content: " | ";
  white-space: nowrap;
}

ul, li {
  display: inline;
}

.mask {
  width:4px;
  position: absolute;
  top:8px; //position as needed
}

more complete example: http://jsbin.com/hoyaduxi/1/edit