Separating a list of values with commas using CSS

On the web, we’re often presented with a list of values that we need to display in a comma-separated manner.

For example, perhaps I would rather display a list of city names like Amsterdam London Paris Berlin as:

Amsterdam, London, Paris, and Berlin.

While we could tackle this with a variety of approaches including PHP or Javascript, we can also easily handle it with CSS.

Here’s the HTML markup for the list of items:

This CSS handles adding commas and the word ‘and’ on the last item:

 

Leave a Reply