Counters (CSS)
The counters() CSS function enables combining markers when nesting counters. The function returns a string that concatenates the current values of the named and nested counters, if any are present, with the string provided. The third, optional parameter enables defining the list style.
The counters() function is generally used within pseudo-element through the content property, but theoretically, it can be used wherever a <string> value is supported.
The counters() function has two forms: counters(<name>, <string>) and counters(<name>, <string>, <style>). The generated text is the value of all counters with the given <name>, arranged from the outermost to the innermost, and separated by the specified <string>. The counters are rendered in the <style> indicated, defaulting to decimal if no <style> is specified.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1.5 | 3 | 18 | 1 | |
| Other | ||||||
| The counter-increment CSS property can be used to increase or decrease the value of the named CSS counters by the specified values, or to prevent all counters or an individual counter's value from being changed. | 2 | 12 | 1 | 3 | 18 | 1 |
| CSS property | ||||||
list-item | 28 | 12 | 1 | 9 | 28 | 9 |
none | 2 | 12 | 1 | 3 | 18 | 2 |
| Other | ||||||
| The counter-reset CSS property creates named CSS counters and initializes them to a specific value. It supports creating counters that count up from one to the number of elements, as well as those that count down from the number of elements to one. | 2 | 12 | 1 | 3 | 18 | 1 |
| CSS property | ||||||
list-item | 28 | 12 | 1 | 9 | 28 | 9 |
none | 2 | 12 | 1 | 3 | 18 | 2 |
reset does not affect siblings Experimental Resets counter on current element (not sibling elements). | | | 82 | | | |
| Other | ||||||
| The counter() CSS function returns a string representing the current value of the named counter, if there is one. | 1 | 12 | 1 | 3 | 18 | 1 |
- This browser only partially implements this feature
- Overriding the initial value of the implicit `list-item` counter has no effect when the default marker string for list items (`::marker`) is generated; see bug 338233131.
- This browser only partially implements this feature
- Overriding the initial value of the implicit `list-item` counter results in incorrect values for the `counter()` function used to generate content, as it is not fully implemented; see bug 260436.
- This browser only partially implements this feature
- Overriding the initial value of the implicit `list-item` counter has no effect when the default marker string for list items (`::marker`) is generated; see bug 338233131.
- This browser only partially implements this feature
- Overriding the initial value of the implicit `list-item` counter results in incorrect values for the `counter()` function used to generate content, as it is not fully implemented; see bug 260436.
Syntax
body {
counter-reset: chapter;
}
h2::before {
counter-increment: chapter;
content: 'Chapter ' + counter(chapter);
}Live demo
Use cases
-
Using Counters (CSS)
The counters() CSS function enables combining markers when nesting counters.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.