counter-reset
`counter-reset` creates a CSS counter (or resets it), `counter-increment` increases it on each matching element; the value is printed with `counter()`.
Syntax
counter-reset: name start; counter-increment: name step;Values
| Parameter | Type | Description |
|---|---|---|
| name | ident | Any counter name you choose, e.g. `step`. |
| start | integer | Optional. The value after the reset, 0 by default. |
| step | integer | Optional. How much `counter-increment` adds, 1 by default; may be negative. |
Examples
Numbered steps without an <ol>:
<style>
.steps { counter-reset: step; }
.steps h3 { counter-increment: step; margin: 4px 0; }
.steps h3::before { content: "Step " counter(step) ": "; color: teal; }
</style>
<div class="steps">
<h3>Choose a plan</h3>
<h3>Enter your details</h3>
<h3>Pay</h3>
</div>Notes
Reset the counter on the container and increase it on the items — if you reset it on each item, every item shows 1. counter-set sets a counter to a value without creating a new one. Lists have a built-in counter named list-item, used by the bullets of <ol>.
See also
- counter() — Prints the value of a CSS counter in `content`; `counters()` prints all nested levels at once, like 2.1.3.
- content — The content of the `::before` and `::after` pseudo-elements.
- ::before — Creates a virtual first child of the element — for decorative text or shapes.
- @counter-style — Defines your own list numbering style, which can then be used in `list-style-type` and `counter()`.
Related recipes
In the tutorial
- CSS counters — Automatic numbering with CSS — counter-reset, counter-increment, the counter() and counters() functions, numbered headings, nested numbering 1.1, 1.2 and the @counter-style rule.