Стилізація маркерів в CSS

25

Від автора: немає нічого незвичайного в тому, що ми хочемо стилізувати маркери елементів списку. Наприклад, сині точки і чорний текст в ненумерованном списку. Або червоні кружки з білим текстом нумерованном списку.

Є робочий проект специфікації, в якому описується псевдоэлемент ::marker, з допомогою якого можна стилізувати маркери.

/* Ніде не підтримується; код може змінитися */
li::marker {
color: blue;
}

Завдяки CSS лічильників у нас з’явилася така можливість. Суть в тому, що спершу видаляється list-style, а потім маркери застосовуються через лічильники псевдоелемент.

ol {
list-style: none;
counter-reset: my-awesome-counter;
}
li {
counter-increment: my-awesome-counter;
}
li::before {
content: counter(my-awesome-counter);
}