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 <string> value is supported.

Try it

Syntax

css
/* 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 <counter-name>. The optional second parameter is the <counter-style>.

<counter-name>

A <custom-ident> identifying the counter, which is the same case-sensitive name used with the counter-reset and counter-increment property values. The counter 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.

Note: To join the counter values when nesting counters, use the counters() function, which provides an additional <string> parameter.

Formal syntax

<counter()> = 
counter( <counter-name> , <counter-style>? )

<counter-style> =
<counter-style-name> |
<symbols()>

<symbols()> =
symbols( <symbols-type>? [ <string> | <image> ]+ )

<symbols-type> =
cyclic |
numeric |
alphabetic |
symbolic |
fixed

<image> =
<url> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

Examples

lower-roman compared to lower-alpha

In this example, we display a counter using lower-roman and lower-alpha list styles.

HTML

html
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

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

html
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

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.

css
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

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
counter()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also