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.
Direct Link to Article — Permalink
The post CSS Pseudo Commas appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.