counter()
=========

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

### 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
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* 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