counter-increment
Advance or decrease named CSS counters in document order.
Overview
| Class | Declarations |
|---|---|
counter-increment:none | counter-increment: none;
|
counter-increment:<name> | counter-increment: <name>;
|
counter-increment:<name>|<integer> | counter-increment: <name> <integer>;
|
counter-increment:<name>|<integer>|<name>|<integer> | counter-increment: <name> <integer> <name> <integer>;
|
Basic usage
Number sections
Increment a named counter on each heading. The article creates section at zero; each heading adds one before its ::before content reads the value. The visible sequence is 1, 2, 3.
<!-- Initial 0 · increment 1 --><article class="counter-reset:section"> <h2 id="target" class="mx:0 mb-2xs mt:0 font-md font-medium leading-lg counter-increment:section text-blue::before content:counter(section)'.\00a0'::before">Overview</h2> <h2 class="mx:0 mb-2xs mt:0 font-md font-medium leading-lg counter-increment:section text-blue::before content:counter(section)'.\00a0'::before">Installation</h2> <h2 class="mx:0 mb-2xs mt:0 font-md font-medium leading-lg counter-increment:section text-blue::before content:counter(section)'.\00a0'::before">Configuration</h2></article>Keep the counter name consistent across reset, increment and content. The generated prefix belongs to the heading; the label and computed readout are outside the authored article.
Count backward
Use a negative step to count down. Starting step at 11 and subtracting one on each item produces 10, 9, 8.
<!-- Initial 11 · increment −1 --><ol role="list" reversed start="10" class="m:0 p:0 font-md leading-lg list-style:none counter-reset:step|11"> <li id="target" class="mb-2xs counter-increment:step|-1 text-blue::before content:counter(step)'.\00a0'::before">Prepare release notes</li> <li class="mb-2xs counter-increment:step|-1 text-blue::before content:counter(step)'.\00a0'::before">Run validation</li> <li class="mb-2xs counter-increment:step|-1 text-blue::before content:counter(step)'.\00a0'::before">Publish the build</li></ol>The ordered list also declares reversed and start="10" so its HTML order agrees with the visual countdown. Use native list numbering when custom CSS counters are unnecessary.
Apply conditionally
Resize past sm to increase the step from one to two on screen. The same three headings then show 2, 4, 6. Print retains the ordinary 1, 2, 3 sequence.
<!-- Real viewport · increment 1 or 2 --><article class="counter-reset:section"> <h2 id="target" class="mx:0 mb-2xs mt:0 font-md font-medium leading-lg counter-increment:section text-blue::before content:counter(section)'.\00a0'::before counter-increment:section@print counter-increment:section|2@screen@sm">Overview</h2> <h2 class="mx:0 mb-2xs mt:0 font-md font-medium leading-lg counter-increment:section text-blue::before content:counter(section)'.\00a0'::before counter-increment:section@print counter-increment:section|2@screen@sm">Installation</h2> <h2 class="mx:0 mb-2xs mt:0 font-md font-medium leading-lg counter-increment:section text-blue::before content:counter(section)'.\00a0'::before counter-increment:section@print counter-increment:section|2@screen@sm">Configuration</h2></article>Changing an increment recomputes the following values in that counter’s scope. It does not change the underlying heading text.