The counter()
CSS function returns a string representing the current value of the named counter, if there is one. It is generally used with pseudo-elements, but can be used, theoretically, anywhere a <string>
value is supported.
/* Simple usage */
counter(countername);
/* changing the counter display */
counter(countername, upper-roman)
A counter has no visible effect by itself. The counter()
function (and counters()
function) is what makes it useful by returning developer defined strings (or images).
Note: The counter()
function can be used with any CSS property, but support for properties other than content
is experimental, and support for the type-or-unit parameter is sparse.
Check the Browser compatibility table carefully before using this in production.
Syntax
Values
<custom-ident>
- A name identifying the counter, which is the same case-sensitive name used for the
counter-reset
andcounter-increment
. The name cannot start with two dashes and can't benone
,unset
,initial
, orinherit
. <counter-style>
- A
<list-style-type>
name,<@counter-style>
name orsymbols()
function, where a counter style name is anumeric
,alphabetic
, orsymbolic
simple predefined counter style, a complex longhand east Asian or Ethiopic predefined counter style, or other predefined counter style. If omitted, the counter-style defaults todecimal
.
Formal syntax
counter( <custom-ident>, <counter-style>? )where <counter-style> = <counter-style-name> | symbols()where <counter-style-name> = <custom-ident>
Examples
default value compared to upper Roman
HTML
<ol> <li></li> <li></li> <li></li> </ol>
CSS
ol { counter-reset: listCounter; } li { counter-increment: listCounter; } li::after { content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman) "]"; }
Result
decimal-leading-zero compared to lower-alpha
HTML
<ol> <li></li> <li></li> <li></li> </ol>
CSS
ol { counter-reset: count; } li { counter-increment: count; } li::after { content: "[" counter(count, decimal-leading-zero) "] == [" counter(count, lower-alpha) "]"; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Lists Module Level 3The definition of 'CSS Counters' in that specification. | Working Draft | No change |
CSS Level 2 (Revision 1)The definition of 'CSS Counters' in that specification. | Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
counter()
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 8 |
Opera
Full support 9.2 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
See also
- Using CSS Counters
counter-reset
counter-set
counter-increment
@counter-style
- CSS
counters()
function
counter() by Mozilla Contributors is licensed under CC-BY-SA 2.5.