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 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) |
| counterstyle | Optional. The style of the counter (can be a list-style-type value) |
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 reference: content property
CSS reference: counter-increment property
CSS reference: counter-reset property
