CSS counter() function
Example
Create a counter in the page (in the body selector), increment the counter value for each <h3> element, and add the text "Section counter value" before each <h3> element:
body {
counter-reset: section; /*Reset the counter to 0*/
}
h3:before {
counter-increment: section; /*Increment Counter Value*/
content: "Section " counter(section) ": "; /*Display counter*/
}
Try it Yourself »
Definition and usage
The counter() function returns the current value of the counter as a string.
The value of the counter is set by usingcounter-resetandcounter-incrementOperation: apply the counter() function on content to display it on the page.
Supported versions: CSS3
Browser Support
| Function | |||||
|---|---|---|---|---|---|
| counter() | Supported | Supported | Supported | Supported | Supported |
CSS Syntax
counter(countername, counterstyle)
| Value | Description |
|---|---|
| countername | Required. The name of the counter (the same name used with the counter-reset and counter-increment properties). |
| counterstyle | Optional. The style of the counter (can be CSSlist-style-typeproperty value). |
More Examples
Example
Setting counter styles:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section, upper-roman) ": ";
}
Try it Yourself »
Example
Setting nested counters:
ol {
counter-reset: section; /*Create a new counter instance for each ol element*/
list-style-type: none;
}
li:before {
counter-increment: section; /*Only increment the current instance of the counter.*/
content: counters(section, ".") " "; /*Add a '.'-separated value to all counter instances*/
}
Try it Yourself »
other extensions