counter() CSS Function

The counter() CSS function is used to retrieve the current value of a CSS counter-reset or counter-increment for a specified counter and display it in generated content, typically within the content property. It allows you to insert numeric values dynamically into your web page without altering the HTML structure, making it particularly useful for automatically numbered lists, headings, or sections.

Counters in CSS are essentially named variables that track numeric values. You can initialize a counter using counter-reset, increment it with counter-increment, and then display it using counter(). By default, counter() displays the value as a decimal number, but you can combine it with counters() or specify a list-style-type to change the formatting (e.g., Roman numerals, letters, etc.).

A simple example of counter() usage is numbering paragraphs within a div:

div {
  counter-reset: section;
}

div p::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

In this example:

• The counter named section is reset at the start of each div.
• Each p inside the div increments the counter.
• The counter() function then displays the current counter value before the paragraph text.

This approach allows for automatic numbering without hardcoding numbers in the HTML, keeping content flexible and easier to maintain. You can also use counter() multiple times in the content property to display counters in complex formats, such as nested lists or multi-level headings.