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

One solution is to style the left border like so:

li { display: inline; }
li + li {
  border-left: 1px solid;
  margin-left:.5em;
  padding-left:.5em;
}

However, this may not give you desirable results if the entire lists wraps, like it does in your example. I.e. it would give something like:

foo | bar | baz
 | bob | bill
 | judy