Home > Designing, Others > CSS Pseudo Commas

CSS Pseudo Commas

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.

CodePen Embed Fallback

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 after pseudo-element

… of a

  • 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 ( anyone???) to help support sentences convey list items without breaking out of a paragraph.

    Direct Link to ArticlePermalink


    The post CSS Pseudo Commas appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

    Categories: Designing, Others Tags:
    1. No comments yet.
    1. No trackbacks yet.
    You must be logged in to post a comment.