CSS Counting: What, How, and When

January 29, 2017
CSS and SASS Frontend

Home Css SassCss Counting What How And When

I recently read This awesome article on CSS-Tricks about a bunch of interesting CSS properties. While some of the properties were already well known to me, there were a few that stood out and. The one that stood out the most, though, was CSS Counting.

What CSS Counting Is

CSS Counting relies on a (sort-of) variable which, of course, is maintained by CSS. The counter can be manipulated by CSS rules to track their usage. The whole list of properties and values are listed below:

body {
    /*
    counter-reset sets the value and names the counter
    */
    counter-reset: el;
}
.el {
    /*
    counter-increment adds to the value with every
    next instance of an element with the 'el' class
    */
    counter-increment: el;

    /*
    counter() prints the value
    */
    &:before {
        content: "Count: " counter(el);
    }
}

How To Use It

Well, the code above kind of goes into how to use it, but it doesn’t explain the logic. Basically, counters should be reset on a basic level. So if you have a counter for headings in an article, and your article is a single page, it would make sense to reset the counter on the <body> tag.
But if your articles come in a stream, say on an ‘endless scroll’ website, it would make sense to reset the counter on every <section> or <article> tag (or <div> tag, depending on how you built your site).

You can also have multiple counters, so using it to list article numbers with another counter for subheadings is possible. Or subsubheadings. Or subsubsubheadings. Or….
Here’s a demo!

See the Pen CSS Counting by Nate Northway (@the_Northway) on CodePen.

When to Use Counters

A few years ago, I built a site for a neighborhood association. I could have used this technique to label the bylaws efficiently. Other areas where this could be used can be in list-type articles, or anywhere that uses labels to reference sections.

Drawbacks

The problem with this method is that the :before CSS pseudo-element is not selectable, meaning that if somebody needed to copy/paste the bylaws in the previously mentioned neighborhood association site, the section/subsection count wouldn’t have been copied over.
One way to circumvent this issue is by building the counter functionality in JavaScript. But that would totally invalidate the use of the CSS counter. Unfortunately, there is no way to access the CSS counter in JavaScript (even when using a library). Hopefully, a method can be developed to make the counter accessible to JS.

Although CSS Counters are cool (and could arguably be useful), they aren’t accessible because to show them requires the use of a pseudo-element. They aren’t selectable, won’t be seen by a screen-reader, and won’t show up in ‘reader’ views (like on Safari). Because of the lack of accessibility, I’d suggest against using this method (for now). As an alternative, consider using a JavaScript alternative.