SwedishChef SwedishChef - 4 months ago 17
HTML Question

How to style unordered lists in CSS as comma separated text

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

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

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