A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that makes use of pseudo-elements to put commas between record objects which can be displayed inline, and the result’s a natural-looking full sentence with correct punctuation.
The way it works
The trick? First, it’s to make an unordered record an inline ingredient with no markers or spacing:
ul {
padding: 0;
margin: 0;
show: inline;
list-style-type: none;
}
Subsequent, we show record objects inline so that they move naturally as textual content in a sentence:
li {
show: inline;
}
Then we add commas between record objects by choosing their ::after pseudo-element, and setting it’s content material property with a comma (,) worth.
li::after{
content material: var(–separator);
}
Oh, however wait! What concerning the ol’ Oxford comma? Use :nth-last-of-type() to pick out the second-to-last record merchandise, and set its ::after pseudo-element’s content material property to “, and” earlier than the final record merchandise.
li:nth-last-of-type(2)::after{
content material: “, and “;
}
We’re not carried out. @ShadowShahriar considers an edge case the place there are solely two objects. All we’d like is to show an “and” between these two objects, so:
li:first-of-type:nth-last-of-type(2)::after {
content material: ” and “;
}
I needed to look that up on Selectors Defined to ensure I used to be studying it accurately. That’s saying:
The after pseudo-element
… of a <li> ingredient supplied it’s the first of its sort in its guardian and the nth of its sort from the top (components) in its guardian.
What a mouthful! The ultimate contact is a interval on the finish of the record:
li:last-of-type::after {
content material: “.”;
}
Utilizing customized properties
We simply checked out an abridged model of the particular code. @ShadowShahriar does a pleasant factor by setting a comma and the “and” as customized properties:
ul {
–separator: “,”;
–connector: “and”;
padding: 0;
margin: 0;
show: inline;
list-style-type: none;
}
That means, once we can swap these out for different methods to separate record objects later. Good contact.
This caught my eye not just for its intelligent use of pseudo-element trickery, but in addition for its simplicity. It’s utilizing tried and true CSS rules in a means that helps semantic HTML — no additional courses, parts, and even JavaScript to assist manipulate issues. It virtually makes me marvel if HTML might use some form of inline record ingredient (<il> anybody???) to assist help sentences convey record objects with out breaking out of a paragraph.
Direct Hyperlink to Article — Permalink
The submit CSS Pseudo Commas appeared first on CSS-Methods. You possibly can help CSS-Methods by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!