@counter-style
Описывает собственный стиль нумерации списка, который затем можно использовать в `list-style-type` и `counter()`.
Синтаксис
@counter-style name { system: cyclic; symbols: "★"; suffix: " "; }Параметры
| Параметр | Тип | Описание |
|---|---|---|
| system | cyclic | numeric | alphabetic | fixed | additive | Как сочетаются символы: `cyclic` повторяет их по кругу, `numeric` считает ими как цифрами, `fixed` использует каждый один раз. |
| symbols | strings | Символы в кавычках через пробел. |
| suffix | string | Что идёт после маркера; по умолчанию `". "`. |
Примеры
Список с чередующимися маркерами-эмодзи:
<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>Примечания
Для одного символа достаточно list-style-type: "★ " — @counter-style нужен, когда маркер зависит от номера. Через system: extends decimal можно взять готовый стиль и поменять, скажем, только suffix. Поддерживается всеми актуальными браузерами с 2023 года.
См. также
- list-style — Вид маркеров списка: тип, положение и картинка.
- counter() — Выводит значение CSS-счётчика в `content`; `counters()` выводит сразу все вложенные уровни, например 2.1.3.
- ::marker — Маркер или номер пункта списка.
В учебнике
- Счётчики CSS — Автоматическая нумерация средствами CSS — counter-reset, counter-increment, функции counter() и counters(), нумерованные заголовки, вложенная нумерация 1.1, 1.2 и правило @counter-style.