Оформление нумерованных списков ol
Каждый уважающий себя разработчик сайтов хочет чтобы его проект выглядел лучше других. Поэтому предлагаем для создания красивых сайтов рассмотреть несколько примеров оформления списков ol на CSS с применением счетчика counter и псевдоэлемтов :before и :after.
Пример HTML кода для нумерованного списка OL
Цвет нумерации для OL LI
Для задания цвета нужно переопределить нумерацию через псевдоэлемт ol li:before
Рабочий пример цвета нумерации для OL- Текстовый блок №1
- Второй текстовый блок
- Текстовый блок №4
- Четвертый текстовый блок
CSS код
Большие цифры для OL LI
Для задания размера font-size для ol необходимо переопределить нумерацию через псевдоэлемт ol li:before
Рабочий пример больших цифр для OL- Текстовый блок №1
- Второй текстовый блок
- Текстовый блок №4
- Четвертый текстовый блок
CSS код
Квадратные нумерованные маркеры для OL LI
Для задания квадратных маркеров мы переопределяем стандартную нумерацию через псевдоэлемт ol li:before
Рабочий пример цвета нумерации для OL- Текстовый блок №1
- Второй текстовый блок
- Текстовый блок №4
- Четвертый текстовый блок
CSS код
Круглые маркеры для OL LI
Для вывода круглых маркеров в CSS нужно переопределить нумерацию через псевдоэлемт ol li:before
Рабочий пример цвета нумерации для OL- Текстовый блок №1
- Второй текстовый блок
- Текстовый блок №4
- Четвертый текстовый блок
CSS код
Отбивающая вертикальная линия для OL LI
Для задания разграничительной линии нужно переопределить нумерацию через псевдоэлемт ol li:before и указать абсолютом линию через ol:before
Рабочий пример цвета нумерации для OL- Текстовый блок №1
- Второй текстовый блок
- Текстовый блок №4
- Четвертый текстовый блок
CSS код
Пошаговый список для OL LI
Связный между собой пошаговый список на CSS стилях
Рабочий пример цвета нумерации для OL- Текстовый блок №1
- Второй текстовый блок
- Текстовый блок №4
- Четвертый текстовый блок
CSS код
