CSS counter() Function
Example
Create a counter for the page (in the body selector). Increment the counter value for each <h2> element, and add the text "Section <value of the counter>:" before each <h2> element:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS counter() function returns the current value of the named counter, as a string.
| Version: | CSS3 |
|---|
Browser Support
| Function | |||||
|---|---|---|---|---|---|
| counter() | Yes | Yes | Yes | Yes | Yes |
CSS Syntax
counter(countername,
counterstyle)
| Value | Description |
|---|---|
| countername | Required. The name of the counter (which is the same name used for the counter-reset and counter-increment properties). Note that the name is case sensitive |
| counterstyle | Optional. The style of the counter (can be a list-style-type value, a @counter-style name or symbols() function). Default value is decimal |
More Examples
Example
Set the style of the counter:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section,
upper-roman) ": ";
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Counters.
CSS reference: content property.
CSS reference: counter-increment property.
CSS reference: counter-reset property.
CSS reference: @counter-style rule.
CSS reference: counters() function.
