Using CSS Counters

The CSS counters are variables which we can increment or decrement with the specific property. With the help of it, we can achieve some generic iteration like in a programming language.

This method can be used for some creative solution which includes a counter for some repeating part of your code.

To control your counters you need the counter-reset and counter-increment property and also the counter() and counters() function pair. This methodology not worth anything without the counter display, for that we can use the simplified content property.

The behavior is simple. You have an unordered list, and you want to count your li items. You specify a new counter on the ul element, and you increment it on the li elements.

counter-reset property

We can define our counter variable with the counter-reset property; for this, we have to give any name and optionally a start value. The default start data is zero. This property goes to the wrapper element.

counter-increment property

With the use of the counter-increment property, we can increase or decrease our counter value. This property also has an optional second value which specifies the increment/decrement volume.

counter() function

The counter() function is responsible for the dump. The place of the dump is the content property because this is where you can give back data to your HTML through CSS. The function has two parameters; the first is the name of the counter variable and the second is the counter type (optional).

Note: in CSS there aren’t any concatenation operator so if you want to connect two value in the content property merely use space.

counters() function

This function does the same job as the counter() function. The main difference is that with the counters() you can embed the counter iterations to another like in a multi-level ul list. It has three parameters, the first is the name of the counter, the second is the separator, and the third is the counter type (optional).

Use Case #1 – Automatic Documentation Issue Tracking

This solution can be handy when you have some repetitive element, and you also want to count them.

We create a counter-reset on our .container wrapper element. After this, we set a counter-increment for the items with issues class name. In the end, we write out the value of the counter with the help of the content property on the .issues:before items.

See the Pen CSS Counter Example by Adam Laki (@adamlaki) on CodePen.

Use Case #2 – Nested Lists

Using the counters() function, we can make nested list counter as we do in our text editor program.

See the Pen Nesting Counters by Adam Laki (@adamlaki) on CodePen.

Use Case #3 – Counting Checked Checkboxes

Using the input fields :checked pseudo-class value we can check if a checkbox is checked and if so we can increment our counter.

See the Pen Checkbox Counter by Adam Laki (@adamlaki) on CodePen.

Summary in a Video

Steve Griffith made an excellent and informative overall video on this topic. It is covering almost everything you need to know about CSS counters.

Other Use Case(s)

  1. Šime Vidas posted a great example with footnotes.
  2. Sam Dutton made an interesting line numbering example.
  3. Gaël use this feature on a complex level in his project named a11y.css.

24 thoughts on “Using CSS Counters

    1. Hi Gaël!

      This is excellent and complicated use case, I love it! Nice project by the way! I gave it to the use case list. Thanks for the sharing and for the useful tool! 😉

    1. Hi Steve!

      This is a great and informative video. I think it contains everything that you should know about the counters and your style is brilliant. Can I embed it in the article?

      Thanks for your comment and your backlink!

      1. Hey Adam. Absolutely. Please feel free to embed or share the tutorial.

        I did another video after that about getComputedStyle( ). Now I’m putting together a plan for a tutorial about how to use the two things in conjunction. That way you can use CSS to dynamically count and/or number things and then use JavaScript to read the total and save it. Just deciding on whether I want to save it in localStorage or do something else with the count.

        1. HI Steve!

          Thank you! I’ve embedded in the article!

          It sounds interesting; I’m curious about the result! By the way, you have a great collection of tutorials (I’ve checked some). Your style and the overall quality is excellent! I hope you get a lot more followers because you deserve it.

          Thanks!

          1. Hey Adam,
            So, after some research, the CSSOM (CSS Object Model) is still in working draft and not officially supported in any browser yet. Although Firefox is close.
            We can use getComputedStyle( elementObject, ‘::after’ ).content to get the value of the content property from the CSS. However, this will return something like “counter(info)”, not the actual number.
            As part of the new CSSOM there will be a method called getCounterValue( ) which will provide the actual number. Soon. Fingers crossed.

          2. Hi Steve! Awesome! The new API looks robust and quite advanced. Do you plan to make a video about it in general (besides your original idea)? I think I should write an article… 🙂

            Thank you for the sharing, really helpful!

          3. I will be making a video but I need to wait a bit. It doesn’t go live until the next full version of Chrome.

Leave a Reply

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