Creating Automatic Numbering with CSS Counter
As you know, in front end development when we add lists to the <ol> element, a numbered list gets generated automatically.
Similarly, we can generate numbers for any element using CSS Counter. Let’s see how it is done?
Usage:
CSS Counter has two main properties: “counter-reset” and “counter-increment”.
The following code is an example of how we number a <h1> element with these properties.
[java]body {
counter-reset: number;
}
h1:before {
counter-increment: number;
content: counter(number) " ";
}[/java]
Here is the image that shows the number of <h1>.
In case you want the number to start from specific number, you can specify the “reset number” as follows:
[java]body {
counter-reset: number 1;
}[/java]
If the reset number is not declared clearly it will be set it as 0 as default, and the count will start from 1.
Similarly, the numbering will start from the next number to the one in the counter-reset property. So, as per given example code above, the count will start from 2.
Here is the image that show the number of <h1> starting from 2.
Even, you can also change the type of the number, which is specified within the content property.
[java]h2:before {
counter-increment: first;
content: counter(number, upper-roman) ". ";
}[/java]
Here is the image that shows the roman number of <h1>.