Grammatical CSS Lists

The Situation

You have a list of items that you need to render with comma separation, and an “and” at the end.

For example:

Cookies, rice, and farts.

The Problem

This display is traditionally done in business logic, creating more complexity than this simple output warrants.

The Solution

We can use pure CSS, using well supported pseudo-classes and pseudo-content. Behold!

HTML

<ul class="list">
  <li class="item">Cookies</li>
  <li class="item">rice</li>
  <li class="item">farts</li>
</ul>

CSS

/* Boilerplate to inline the list. */
.item {
  list-style-type: none;
  display: inline-block;
}

/* Add a comma after each item. */
.item::after {
  content: ', ';
}

/* Add the word "and" between the last two items. */
.item:last-of-type::before {
  content: ' and ';
}

/* Remove the comma after the last item. */
.item:last-of-type::after {
  content: '';
}

Takeaway

The beauty of this solution is that it’s simple, idiomatic, and declarative, and has the added benefit of taking a hard stand on oxford commas.

I use this solution here on this site for the “Topics” display. If it worked for my little blog, it’ll work for anything else!¹