CSS counters are, in essence, variables maintained by CSS whose values can be incremented by CSS rules to track how many times they’re used.
The procedure to use CSS counters involves three main steps:
1. Initializing the Counter: First of all, you need to initialize the counter using the `counter-reset` property.
```
body {
/* Set the counter to 0 */
counter-reset: section;
}
```
1. Incrementing the Counter: Then, you have to increment the counter using the `counter-increment` property.
```
h1 {
/* Increment the counter */
counter-increment: section;
}
```
1. Using the Counter: Finally, you use the counter. This is usually done using the `content` property in a `::before` or `::after` pseudo-element.
```
h1::before {
/* Print the counter */
content: “Section “ counter(section) “: “;
}
```
In the final output, you will get output like “Section 1: “, “Section 2: “, and so on before each `h1` element.
You can also use nested counters and the `counter-reset` property can take multiple counters (similarly, `counter-increment` property can also increment multiple counters).
You can also use the `counters()` function to get a string representation of the counters.
```
For the above HTML, you could use:
```
body {
counter-reset: h1 h2;
}
h1 {
counter-increment: h1;
counter-reset: h2;
}
h2 {
counter-increment: h2;
}
h1::before {
content: “H1: “ counter(h1) “ “;
}
h2::before {
content: “H1: “ counter(h1) “ H2: “ counter(h2) “ “;
}
```
This produces a nested list-like numbering system.
