CSS Counting: What, How, and When

January 29, 2017
CSS and SASS Frontend

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 &lt;section&gt; or &lt;article&gt; tag (or &lt;div&gt; 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.


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.

No Comments...yet

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post

Net Neutrality: What it Is, Why it Matters, and How it Concerns You

From January 26, 2017

With our recent election, the freedom of the internet is in question again, and net neutrality is again becoming a hotly debated topic.

Read This Article
Next Post

CodeIgniter Class Level Variables

From April 23, 2017

I’m always looking for ways to improve how we at Gittr write software. We’ve got a pretty good flow and class level variables helped move our app forward

Read This Article