Кастомизация списков: от ::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