Typography
counter-increment
Increasing or decreasing the value of named CSS counters.
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
Use counter-increment to advance a named counter on each matching element. The counter is usually created with counter-reset and displayed with content.
Overview
Introduce the document structure and goals.
Installation
Add the package and wire it into the build.
Configuration
Customize counters, selectors, and content output.
<article class="counter-reset:section"> <h2 class="counter-increment:section inline-flex::before r:full::before content:counter(section)::before">Overview</h2> <h2 class="counter-increment:section inline-flex::before r:full::before content:counter(section)::before">Installation</h2> <h2 class="counter-increment:section inline-flex::before r:full::before content:counter(section)::before">Configuration</h2></article>Count backward
Pass a negative integer to decrease a counter. Here the first generated value is 10 because the counter starts at 11 and decrements before it is displayed.
- Prepare release notes
- Run validation
- Publish the build
<ol class="list-style:none counter-reset:step|11"> <li class="counter-increment:step|-1 inline-flex::before r:full::before content:counter(step)::before">Prepare release notes</li> <li class="counter-increment:step|-1 inline-flex::before r:full::before content:counter(step)::before">Run validation</li> <li class="counter-increment:step|-1 inline-flex::before r:full::before content:counter(step)::before">Publish the build</li></ol>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="counter-increment:section:hover counter-increment:section@dark counter-increment:section@print counter-increment:section@sm">…</div>