5 способов стилизовать нумерованный список

4 октября 2021

Дефолтная стилизация нумерованных списков выглядит несколько скучно. Существует много способов ее оживить, разнообразить, сделать более заметной и интересной. Сегодня ваша копилка пополнится еще пятью оригинальными способами.

1. Классический трюк со свойствами counter-increment и counter-reset стилизует нумерацию.

See the Pen 5 способов стилизовать нумерованный список — 1 by Ivan (@DanilinBiz) on CodePen.

2. Интересное решение с подсветкой.

See the Pen 5 способов стилизовать нумерованный список — 2 by Ivan (@DanilinBiz) on CodePen.

3. Очень эффектная стилизация: крупная, заметная нумерация.

See the Pen 5 способов стилизовать нумерованный список — 3 by Ivan (@DanilinBiz) on CodePen.

4. Тоже интересное решение от Мэта Маркиза.

See the Pen 5 способов стилизовать нумерованный список — 4 by Ivan (@DanilinBiz) on CodePen.

5. Интересная демонстрация от Джонатана Снука в виде таймлайна с настраиваемыми счетчиками для маркировки каждого блока.

See the Pen 5 способов стилизовать нумерованный список — 5 by Ivan (@DanilinBiz) on CodePen.

По материалам css-tricks.com
Иван Данилин
Автор Иван Данилин

Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.

Добавить комментарий