The counter() CSS function returns a string representing the current value of the named counter, if there is one. It is generally used in the content property of pseudo-elements, but can theoretically be used anywhere a <string> value is supported.

/* Simple usage */ counter(countername);  /* changing the counter display */ counter(countername, upper-roman) 

counter()

The counter() CSS function returns a string representing the current value of the named counter, if there is one. It is generally used in the content property of pseudo-elements, but can theoretically be used 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).

Syntax

Values

<custom-ident>

A name identifying the counter, which is the same case-sensitive name used for the counter-reset and counter-increment. The name cannot start with two dashes and can't be none, unset, initial, or inherit.

<counter-style>

A <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.

Formal syntax

counter( <counter-name>, <counter-style>? )
where <counter-name> = <custom-ident><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
CSS Lists and Counters Module Level 3 # counter-functions

See also

Using CSS Counters counter-reset counter-set counter-increment @counter-style CSS counters() function

Last modified: Feb 3, 2022, by MDN contributors

Select your preferred language English (US)Français日本語中文 (简体) Change language