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

Try it

.double-list {
  counter-reset: count -1;
}

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

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

Best Dynamic Duos in Sports:


    
  
  1. Simone Biles + Jonathan Owens
    2. 
  
  2. Serena Williams + Venus Williams
    3. 
  
  3. Aaron Judge + Giancarlo Stanton
    4. 
  
  4. LeBron James + Dwyane Wade
    5. 
  
  5. Xavi Hernandez + Andres Iniesta
    6.

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

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

A name, <@counter-style> name or symbols() function, where a counter style name is a numeric, alphabetic, or symbolic 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 parameter.

Formal syntax

 = 
  counter(  , ? )  

 = 
    |
             

 = 
  symbols( ? [  |  ]+ )  

 = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

 = 
         |
    

 = 
    |
    

 = 
  url(  * )  |
                        

 = 
  src(  * )

Examples

lower-roman compared to lower-alpha

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

HTML

html
    
  
  1. 
  
  2. 
  
  3.

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
    
  
  1. 
  
  2. 
  
  3.

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
CSS Counter Styles Level 3
# extending-css2

Browser compatibility

See also