Css Counters
📅 2026-06-20 | 📂 CSS
# CSS Counters
CSS counters are "variables" whose values can be set by rules and incremented automatically.
* * *
## Using Counters for Automatic Numbering
CSS counters are like "variables" whose value can be incremented by CSS rules.
CSS counters use the following properties:
* `counter-reset` - Creates or resets a counter
* `counter-increment` - Increments a counter value
* `content` - Inserts generated content
* `counter()` or `counters()` function - Adds the value of a counter to an element
To use a CSS counter, it must first be created with `counter-reset`.
The following example creates a counter in the page (in the `body` selector). The counter value for each `
` element will be incremented by one, and "Section _counter value_:" will be inserted before each `` element:
## CSS Example
```css
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
[Try it Yourself »](#)
* * *
## Nested Counters
The following example creates a counter in the page. The counter value for each `` element will be incremented by one. The text "Section _main heading counter value_." will be inserted before each `` element. The nested counter value for each `` element will be incremented by one, and the text "_main heading counter value_._subheading counter value_" will be inserted before each `` element:
## CSS Example
```css
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
[Try it Yourself »](#)
Counters can also be used in lists, where child elements are automatically created. Here, we use the `counters()` function to insert a string between different nested levels:
## CSS Example
```css
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section, ".") " ";
}
[Try it Yourself »](#)
* * *
## CSS Counter Properties
| Property | Description |
| --- | --- |
| (#) | Inserts generated content using the ::before and ::after pseudo-elements |
| (#) | Increments one or more counter values |
| (#) | Creates or resets one or more counters |
[](#)(#)
(#)[](#)
YouTip