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:

   <span class="comma">Amsterdam</span>
   <span class="comma">London</span>
   <span class="comma">Paris</span>
   <span class="comma">Berlin</span>

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

.comma:not(:last-of-type):after {
  content: ",";
.comma:nth-last-of-type(2):before {
  content: none;
.comma:nth-last-of-type(2):after {
  content: " and ";


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.