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 counter style name or
symbols()
function, where a counter style name is a numeric, alphabetic, or symbolic 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 to decimal
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 3 The 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
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