html - How to style unordered lists in CSS as comma separated text

Question

I’m looking for a way to style an unordered list in XHTML with CSS such that it is rendered inline and the list items are separated by commas.

For example, the following list should be rendered as apple, orange, banana (note the missing comma at the end of the list).

<ul id="taglist">
  <li>apple</li>
  <li>orange</li>
  <li>banana</li>
</ul>

Currently, I’m using the following CSS for styling this list, which almost does what I want, but renders the list as apple, orange, banana, (note the trailing comma after banana).

#taglist {
  display: inline;
  list-style: none;
}

#taglist li {
  display: inline;
}

#taglist li:after {
  content: ", ";
}

Is there a way to solve this problem with pure CSS?

Answer 1

To remove the trailing comma, use the :last-child pseudo-class, like so:

#taglist li:last-child:after {
    content: "";
}