Кастомизация списков: от ::marker до @counter-style

Современный CSS позволяет гибко управлять списками, не перегружая HTML лишними элементами.
Разбираем три основных подхода.

✅ Псевдоэлемент ::marker
Самый быстрый способ изменить стандартную точку или цифру.

Что можно: менять color, font-size и font-family.

Ограничение: нельзя задать фон или произвольное позиционирование.

Нюанс: маркер выравнивается по базовой линии текста. При большом font-size он сместится вверх относительно строки.

✅ Директива @counter-style
Инструмент для создания собственных систем нумерации (Baseline 2023).

system: cyclic — позволяет зациклить любые символы или эмодзи (например, фазы луны 🌑🌓🌕).

system: extends — модифицирует стандартные стили (например, заменяет точку после цифры на скобку: 1) вместо 1.).

✅ Полный контроль через ::before
Когда возможностей ::marker не хватает для сложного дизайна.

Доступность: при list-style: none обязательно добавляйте role="list" в HTML, иначе Safari перестанет озвучивать список корректно.

Механика: используйте функции counter(list-item) для простых списков или counters(list-item, ".") для вложенной нумерации (1.1, 1.2).

Верстка: через position: absolute маркеру можно задать любые размеры, фон и точное положение относительно текста.

Источник: https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/

👉 @frontendInterview