CSS Pseudo Commas

No Comments

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.

CodePen Embed Fallback

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 ArticlePermalink

The submit CSS Pseudo Commas appeared first on CSS-Methods. You possibly can help CSS-Methods by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment