counter()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The counter()
CSS function returns a string representing the current value of the named counter, if there is one.
The counter()
function is generally used within pseudo-element through the content
property but, theoretically, it can be used wherever a
value is supported.
Try it
.double-list {
counter-reset: count -1;
}
.double-list li {
counter-increment: count 2;
}
.double-list li::marker {
content: counter(count, decimal) ") ";
}
Best Dynamic Duos in Sports:
- Simone Biles + Jonathan Owens
- Serena Williams + Venus Williams
- Aaron Judge + Giancarlo Stanton
- LeBron James + Dwyane Wade
- Xavi Hernandez + Andres Iniesta
Syntax
/* Basic usage */
counter(counter-name);
/* changing the counter display */
counter(counter-name, upper-roman)
Counters have no visible effect by themselves.
The counter()
and counters()
functions are what make counters useful by returning developer-defined strings (or images).
Values
The counter()
function accepts up to two parameters. The first parameter is the
. The optional second parameter is the
.
-
A
identifying the counter, which is the same case-sensitive name used with thecounter-reset
andcounter-increment
property values. The counter name cannot start with two dashes and can't benone
,unset
,initial
, orinherit
. -
A
name,<@counter-style>
name orsymbols()
function, where a counter style name is anumeric
,alphabetic
, orsymbolic
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
.
Note:
To join the counter values when nesting counters, use the counters()
function, which provides an additional
parameter.
Formal syntax
Examples
lower-roman compared to lower-alpha
In this example, we display a counter using lower-roman
and lower-alpha
list styles.
HTML
CSS
ol {
counter-reset: count;
}
li {
counter-increment: count;
}
li::after {
content:
"[" counter(count, lower-roman) "] == ["
counter(count, lower-alpha) "]";
}
Result
Displaying a counter using three styles
In this example, we use the counter()
function three times.
HTML
CSS
We include the counter()
function with three different counter styles, including the default decimal value. We've added padding to the list to provide space for the long ::marker
string.
ol {
counter-reset: listCounter;
padding-left: 5em;
}
li {
counter-increment: listCounter;
}
li::marker {
content:
"Item #" counter(listCounter) " is: ";
}
li::after {
content:
"[" counter(listCounter, decimal-leading-zero) "] == ["
counter(listCounter, upper-roman) "]";
}
Result
Specifications
Specification |
---|
CSS Lists and Counters Module Level 3 # counter-functions |
CSS Counter Styles Level 3 # extending-css2 |
Browser compatibility
See also
- Using CSS Counters
counter-reset
counter-set
counter-increment
@counter-style
- CSS
counters()
function - CSS lists and counters module
- CSS counter styles module
- CSS generated content module