@counter-style
Defines your own list numbering style, which can then be used in `list-style-type` and `counter()`.
Syntax
@counter-style name { system: cyclic; symbols: "★"; suffix: " "; }Parameters
| Parameter | Type | Description |
|---|---|---|
| system | cyclic | numeric | alphabetic | fixed | additive | How symbols are combined: `cyclic` repeats them, `numeric` counts with them like digits, `fixed` uses each once. |
| symbols | strings | The symbols in quotes, separated by spaces. |
| suffix | string | What follows the marker; `". "` by default. |
Examples
A list with alternating emoji markers:
<style>
@counter-style fruits {
system: cyclic;
symbols: "🍎" "🍐" "🍊";
suffix: " ";
}
ul { list-style: fruits; }
</style>
<ul><li>Apples</li><li>Pears</li><li>Oranges</li><li>More apples</li></ul>Notes
For a single symbol, list-style-type: "★ " is enough — @counter-style is useful when the marker depends on the number. With system: extends decimal you can take an existing style and change only, say, its suffix. Supported in all current browsers since 2023.
See also
- list-style — The look of list markers: their type, position and image.
- counter() — Prints the value of a CSS counter in `content`; `counters()` prints all nested levels at once, like 2.1.3.
- ::marker — The bullet or number of a list item.
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.