| Updated 03.05.22
Incrementing numbers in CSS
Recently I needed to create a simple carousel that had some text and a number for each card, going up incrementally as you scroll through. Sounds simple enough, I could approach it the quick and easy way of just simply writing out each number in the HTML, along with all the relevant copy for each card. But every time I create new code, I always try and think of how I can make this module as quick to reuse as possible, in the event that it will be. Sometimes with a heavy deadline weighing on your shoulders it can be hard to think in this way, as it would be much quicker and easier to just build it the first method I described above.
But no, I wanted to do the hard work upfront of creating a setup that would add the numbers for each card for me, so in future, it’s just one less thing to think about for me or whoever else’s uses the module.
Below is an example Codepen that I set up to show off the technique. You can change the number of cards with the plus and minus buttons to see how the CSS counter will just figure out the numbers for you.
See the Pen
CSS incrementing numbers by Dalton Walsh (@daltonw)
on CodePen.
The Tutorial
So in this tutorial, I’m just going to create some boxes in HTML that each have a number in them. Sounds simple enough! Well for this I will be using the wonderful little known CSS function called counters.
So as you can see, CSS counters are a perfect tool for this job. Variables within CSS that change depending on what we do with them.
HTML
First I create some HTML, nothing special here other than the fact you will notice there are no numbers being written out like you might have expected if this was built in the traditional way.
<div class="card_container">
<div class="card">
<div class="card--count"></div>
</div>
</div>CSS
The first thing you need to do for the CSS is to add a counter-reset to the container. This sets the initial value for the counter. It Is set by simply giving it a name, such as ‘count’ in my example. You can also add a second value to the declaration, this is done to set a different starting number, other than the default of 0. For example, you might want to start the counter at the number 10, so you would set counter-reset: count 10;.
The next property to add is the counter-increment, as you might have guessed, this tells the counter how much it needs to increment by. Similarly, you only need to give the name-value taken from the counter-reset for it to work here. However this time it will default to incrementing by 1 unless a different second value is added.
Finally, we add the counter() CSS function to the content of where we wish it to appear in our code. We add the name value between the parentheses which is taken from the one we first set in the counter-reset, like so “counter(count)”.
Be aware that the counter must be set within the same scope as the counter-increment declaration.
.card_container {
counter-reset: count 0;
.card {
&--count {
&:after {
counter-increment: count 1;
content: counter(count);
}
}
}
}Well there you go, pretty simple right? There are of course many other applications of this technique, some can be found on the MDN docs – as well as more depth about CSS functions.
Please be sure to check out some of my other CSS tutorials, like Centring in CSS or Searching for random.