css types 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.

Syntax

/* 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).

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.

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)
    "]";
}

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
    )
    "]";
}

See also