Firefox Tomorrow

css function

`counter()` CSS function

View on MDN ↗

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.

Interactive exampleOpen the canonical MDN source to run this embedded demo.
.double-list {
  counter-reset: count -1;
}

.double-list li {
  counter-increment: count 2;
}

.double-list li::marker {
  content: counter(count, decimal) ") ";
}

<p>Best Dynamic Duos in Sports:</p>
<ol class="double-list">
  <li>Simone Biles + Jonathan Owens</li>
  <li>Serena Williams + Venus Williams</li>
  <li>Aaron Judge + Giancarlo Stanton</li>
  <li>LeBron James + Dwyane Wade</li>
  <li>Xavi Hernandez + Andres Iniesta</li>
</ol>

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

  • <counter-name>
    • : A &lt;custom-ident&gt; 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>

[!NOTE] To join the counter values when nesting counters, use the counters() function, which provides an additional string 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

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

CSS

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::after {
  content:
    "[" counter(count, lower-roman) "] == ["
    counter(count, lower-alpha) "]";
}

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Displaying a counter using three styles

In this example, we use the counter() function three times.

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.

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also