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

I do like this for list items in

elements. Consider the following markup:

  
Profile
  
Options
  
Logout

I style it with the following CSS:

menu > li {
  display: inline;
}

menu > li::after {
  content: ' | ';
}

menu > li:last-child::after {
  content: '';
}

This will display:

Profile | Options | Logout

And this is possible because of what Martin Atkins explained on his comment

Note that in CSS 2 you would use :after, not ::after. If you use CSS 3, use ::after (two semi-columns) because ::after is a pseudo-element (a single semi-column is for pseudo-classes).