Combining CSS Pseudo-elements, “:after” the “:last-child”

Question

I want to make \"grammatically correct\" lists using CSS. This is what I have so far:

The

tags are displayed horizontally with commas after t

Answer 1

This works :) (I hope multi-browser, Firefox likes it)

li { display: inline; list-style-type: none; }
li:after { content: ", "; }
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }

  
    

      
One
      
Two
      
Three