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

You can combine pseudo-elements! Sorry guys, I figured this one out myself shortly after posting the question. Maybe it's less commonly used because of compatibility issues.

li:last-child:before { content: "and "; }

li:last-child:after { content: "."; }

This works swimmingly. CSS is kind of amazing.