Ordered lists have been an important part of web design for quite a while now. If we needed more control over the appearance of numbers, we had to add more HTML and/or JavaScript to do so until now. Counters in CSS save us much of that trouble.
An ordered list can be rendered as:
1. Item one
2. Item one
3. Item one
What if we wanted complex numbering? What if we wanted dynamic pagination? Or style the numbers in a particular manner?
Instead of doing <li>Item one</li>
, we would have had to replace it by <div><span>1.</span>Item one</div>
instead.
And then apply styles to the span tags. But we are developers. We don’t like hard-coded numbers and repetition! Counters in CSS come to our rescue.
CSS counters are variables whose values can be changed by using CSS rules. They are scoped to the current web page.
Before using counters in CSS, we need to understand its properties. counter-reset
, counter-increment
and counter()
properties are what make the dynamic nature of counters a possibility. There are a couple of other properties as well, but these are sufficient for a basic counter.
:before
or :after
pseudo selector to increment counts.Putting these together, we will first initialize our list:
div.list {
counter-reset: numbered-list;
}
CSSWe are creating a variable called numbered-list to store our counters. Next, we want to increment the variable value every time we encounter a div inside this list. To do that, we will do:
div.list div {
counter-increment: list-number;
}
CSSThis sets up our counter. We need to now add it to the DOM using the content property.
div.list div:before {
content: counter(numbered-list);
}
CSSAnd if we apply this CSS to a list:
<div class="list">
<div>Item 1</div>
<div>Item 2</div>
</div>
HTMLWe get the output:
1Item 1
2Item 2
We can then style the div.list div:before section of the element as we saw fit.
We can even specify a custom starting point to the counter by initializing it as:
counter-reset: list-number 10;
CSSOr specify the increment value:
counter-increment: list-number 10;
CSSBrowser support for counters is pretty good too:
So we can start counters in CSS without much hassle.
There are other functions such as counters() which allow nested counters and the counter function also takes a second parameter to specify the format of the counter which are good additions if you are looking for them.
And that is all you need to know about counters in CSS. Feel free to drop a comment below if you have any questions.
I am terrible at optimizing my keyboard layout for anything. But off lately, my little…
I recently switched completely to the Brave browser and have set ad blocking to aggressive…
I was preparing a slide deck for a hackathon and decided to put in a…
I have been using npx a lot lately, especially whenever I want to use a…
Manually copy-pasting the output of a terminal command with a mouse/trackpad feels tedious. It is…
While working on a project, I wanted to do an integrity check of a file…