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.
<custom-ident>
counter-reset
and counter-increment
. The name cannot start with two dashes and can't be none
, unset
, initial
, or inherit
.<counter-style>
<list-style-type>
name, <@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
.counter( <custom-ident>, <counter-style>? )where
<counter-style> = <counter-style-name> | symbols()where
<counter-style-name> = <custom-ident>
<ol> <li></li> <li></li> <li></li> </ol>
ol { counter-reset: listCounter; } li { counter-increment: listCounter; } li::after { content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman) "]"; }
<ol> <li></li> <li></li> <li></li> </ol>
ol { counter-reset: count; } li { counter-increment: count; } li::after { content: "[" counter(count, decimal-leading-zero) "] == [" counter(count, lower-alpha) "]"; }
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 |
counter-reset
counter-set
counter-increment
@counter-style
counters()
function
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/counter_function