A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-looking complete sentence with proper punctuation.
How it works
The trick? First, it’s to make an unordered list an inline element with no markers or spacing:
ul {
padding: 0;
margin: 0;
display: inline;
list-style-type: none;
}Next, we display list items inline so they flow naturally as text in a sentence:
li {
display: inline;
}Then we add commas between list items by selecting their ::after pseudo-element, and setting it’s content property with a comma (,) value.
li::after{
content: var(--separator);
}Oh, but wait! What about the ol’ Oxford comma? Use :nth-last-of-type() to select the second-to-last list item, and set its ::after pseudo-element’s content property to ", and" before the last list item.
li:nth-last-of-type(2)::after{
content: ", and ";
}We’re not done. @ShadowShahriar considers an edge case where there are only two items. All we need is to display an “and” between those two items, so:
li:first-of-type:nth-last-of-type(2)::after {
content: " and ";
}I had to look that up on Selectors Explained to make sure I was reading it correctly. That’s saying:
The
afterpseudo-element… of a
<li>element provided it is the first of its type in its parent and the nth of its type from the end (formula) in its parent.
What a mouthful! The final touch is a period at the end of the list:
li:last-of-type::after {
content: ".";
}Using custom properties
We just looked at an abridged version of the actual code. @ShadowShahriar does a nice thing by setting a comma and the “and” as custom properties:
ul {
--separator: ",";
--connector: "and";
padding: 0;
margin: 0;
display: inline;
list-style-type: none;
}That way, when we can swap those out for other ways to separate list items later. Nice touch.
This caught my eye not only for its clever use of pseudo-element trickery, but also for its simplicity. It’s using tried and true CSS principles in a way that supports semantic HTML — no extra classes, elements, or even JavaScript to help manipulate things. It almost makes me wonder if HTML could use some sort of inline list element (<il> anyone???) to help support sentences convey list items without breaking out of a paragraph.
