CSS Counters

CSS counters act as “variables” managed by CSS, allowing their values to be incremented by CSS rules (to monitor their usage frequency). They enable adjustments to the appearance of content based on its position within the document.

Automatic Numbering With Counters

CSS counters function similarly to “variables”, where their values can be incremented by CSS rules to track their usage frequency.

To employ CSS counters, the following properties are utilized:

• counter-reset: Establishes or resets a counter
• counter-increment: Increases a counter’s value
• content: Introduces generated content
• counter() or counters() function: Integrates the value of a counter into an element

To utilize a CSS counter, it must be initially established with counter-reset.

The subsequent example initiates a counter for the page within the body selector, then increments the counter value for each <h2> element, prepending “Section <value of the counter>:” to the start of each <h2> element.

Example

Nesting Counters

In the given instance, a single counter is established for the page (referred to as “section”), alongside a separate counter for each <h1> element (referred to as “subsection”).

The “section” counter will be incremented for every <h1> element, denoting “Section <value of the section counter>.”, while the “subsection” counter will be incremented for each <h2> element, representing “<value of the section counter>.<value of the subsection counter>”.

Example

A counter can be advantageous for creating outlined lists as a new instance of a counter is automatically generated in child elements. In this scenario, we utilize the counters() function to inject a string between various levels of nested counters.

Example

CSS Counter Properties