CSS counter() Function

CSS Functions

Example

Create a counter (in the body selector), increment the counter value for each <h3> element, and add the text "Section counter value" before each <h3> element:

body {
  counter-reset: section;           /* Reset counter to 0 */
}
h3:before {
  counter-increment: section;      /* Increment counter value */
  content: "Section " counter(section) ": "; /* Display counter */
}

Definition and Usage

The counter() function returns the current value of the counter as a string.

The value of the counter is manipulated using counter-reset and counter-increment, and displayed on the page by applying the counter() function to content.

Supported Version: CSS3

Browser Support

Function	Chrome	Edge	Firefox	Safari	Opera
counter()	Yes	Yes	Yes	Yes	Yes

CSS Syntax

counter(countername, counterstyle)

Value	Description
countername	Required. The name of the counter (same name used in counter-reset and counter-increment properties).
counterstyle	Optional. The style of the counter (can be a CSS list-style-type

More Examples

Example

Set counter style:

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section, upper-roman) ": ";
}

Example

Set nested counters:

ol {
  counter-reset: section;                /* Create a new counter instance for each ol element */
  list-style-type: none;
}
li:before {
  counter-increment: section;            /* Increment only the current instance of the counter */
  content: counters(section, ".") " ";   /* Add values for all counter instances separated by "." */
}

CSS Functions

❮ Pr Border Style Sel Read Only ❯