counter()

/* Simple usage */
counter(countername);

/* changing the counter display */
counter(countername, 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).

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.

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

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

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

• 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