The counter-increment property provides a way to programmatically advance named counters as the browser renders elements, enabling custom numbering schemes that are separate from the document’s semantic structure. When applied to an element, it updates one or more named counters at that point in the flow so subsequent content can read the new value. This mechanism is frequently used to generate automatic numbers for headings, figures, footnotes, or any repeating element that needs a sequential label without altering the underlying HTML markup.

Because the property only changes the numeric state of a named counter, you typically combine it with generated content so the value becomes visible to users. For example, a pseudo-element can render the current counter value using the content property, allowing the number to appear before or after an element without modifying the element’s text. Counters are context-aware: they live in the cascade and inheritance model of the rendering tree, so increments take effect in document order and nested structures can maintain independent sequences or share counters depending on how you name and manage them.

More complex layouts use counter management in tandem with counter initialization and scoping. To start or reset a counter at a particular point you pair increments with the counter-reset mechanism; resetting allows creation of hierarchical numbering (e.g., section → subsection → paragraph) by resetting a lower-level counter when a higher-level counter advances. You can also increment multiple counters from a single rule to produce compound labels (such as “Figure 3.2”), and you can decrement or apply offsets conceptually to adjust numbering, which is useful when deriving numbers from other sources or when inserting content that should not advance the sequence.

When deciding whether to use counter-increment, consider semantics and accessibility: native list elements and headings convey meaning to assistive technologies, so custom counters should not replace semantic markup where that meaning matters. However, they are ideal for presentational numbering (print styling, numbered captions, visual indexes) where you want flexible formatting without altering document structure. Also be mindful that only elements participating in the rendered flow affect counters — elements that aren’t rendered or are otherwise removed from the layout won’t contribute to increments — and that the visual result depends on where and how you output counter values, often via pseudo-elements. Finally, compare custom counters to built-in list formatting options when appropriate; for example, properties like list-style-type may suffice for simple list numbering without additional counter logic.