От автора: нет ничего необычного в том, что мы хотим стилизовать маркеры элементов списка. Например, синие точки и черный текст в ненумерованном списке. Или красные кружки с белым текстом в нумерованном списке.
Есть рабочий проект спецификации, в котором описывается псевдоэлемент ::marker, с помощью которого можно стилизовать маркеры списка.
|
1 2 3 4 |
/* Нигде не поддерживается; код может измениться */ li::marker { color: blue; } |
Благодаря CSS счетчикам у нас появилась такая возможность. Суть в том, что сперва удаляется list-style, а затем маркеры применяются через счетчики псевдоэлементов.
|
1 2 3 4 5 6 7 8 9 10 11 |
ol { list-style: none; counter-reset: my-awesome-counter; } li { counter-increment: my-awesome-counter; } li::before { content: counter(my-awesome-counter); } |
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
