Дмитрий Валак
Блог Верстальщика

Стилизация нумерованного списка на CSS3

Возможно вы иногда задавались вопросом "как стилизовать нумерованный список", чтобы, например, нумерация списка была оформлена другим цветом, чем сам текст списка. Это легко можно сделать используя возможности CSS3.

See the Pen ol/ul counter styling by Dmitry Valak (@dmitryvalak) on CodePen.

Пример довольно наглядный и простой, потратив немного времени можно понять что к чему. Все что нам нужно это сначала убрать стандартную нумерацию списка и добавить туда счетчик CSS.

counter-reset: list; - инициализация счетчика

content: counter(list); - В качестве данных используем счетчик, который установили для списка

counter-increment: list; - Увеличиваем значение счетчика на 1

counter-reset: list -1; - Начинаем нумерацию списка с 0

counter-increment: list 2; - Четная нумерация списка

counter-increment: list list; - Нечетная нумерация списка