counter()
Prints the value of a CSS counter in `content`; `counters()` prints all nested levels at once, like 2.1.3.
Syntax
content: counter(name, style) | counters(name, "separator");Parameters
| Parameter | Type | Description |
|---|---|---|
| name | ident | The counter created with `counter-reset`. |
| style | list-style-type | Optional. The numbering style: `decimal` (default), `upper-roman`, `lower-alpha`, or a name from `@counter-style`. |
| separator | string | `counters()` only. The string between levels, e.g. `"."`. |
Examples
Chapters with Roman numbers:
<style>
body { counter-reset: chapter; }
h3 { counter-increment: chapter; }
h3::before { content: counter(chapter, upper-roman) ". "; }
</style>
<h3>Beginnings</h3>
<h3>The journey</h3>
<h3>Home again</h3>Nested numbering 1, 1.1, 1.2 with counters():
<style>
ol { counter-reset: item; list-style: none; padding-left: 16px; }
li { counter-increment: item; }
li::before { content: counters(item, ".") " "; color: teal; }
</style>
<ol>
<li>Install<ol><li>Download</li><li>Unpack</li></ol></li>
<li>Configure</li>
</ol>Notes
counter() is used only inside content, so it works with ::before, ::after and ::marker. counters() relies on each nested list resetting the counter again — that creates a new level.
See also
- 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()`.
- content — The content of the `::before` and `::after` pseudo-elements.
- @counter-style — Defines your own list numbering style, which can then be used in `list-style-type` and `counter()`.
- list-style — The look of list markers: their type, position and image.
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.