counters() CSS Function

The counters() CSS function is used to return a string representing the value of a series of counters that have been incremented through the document using the counter-increment property. Unlike the counter() function, which retrieves a single counter value, counters() allows you to concatenate multiple counter levels into a single string, separated by a defined delimiter.

This function is especially useful when styling hierarchical elements such as nested ol lists or headings, where you want to display numbering like "1.2.3" to indicate levels of depth. Each counter in the series is defined by its name and can be formatted with a string, such as decimal numbers, Roman numerals, or letters.

For example, consider nested li items where you want each sub-item to show a multi-level numbering:

ol {
  counter-reset: section;
}

li {
  counter-increment: section;
}

li::before {
  content: counters(section, ".") " ";
}

In this example, the counters(section, ".") function concatenates the counter values of all parent li elements in the hierarchy, separated by a period. So, a third-level item could appear as "1.2.3".

You can also combine counters() with other text in the content property to create more descriptive labels:

li::before {
  content: "Section " counters(section, ".") ": ";
}

Here, the text "Section" is prepended to the hierarchical numbering, producing output like "Section 2.1: ". This makes counters() a powerful tool for automatically numbering nested content without manually updating each element.