Оформление нумерованных списков ol

Оформление нумерованных списков ol

5432

Каждый уважающий себя разработчик сайтов хочет чтобы его проект выглядел лучше других. Поэтому предлагаем для создания красивых сайтов рассмотреть несколько примеров оформления списков ol на CSS с применением счетчика counter и псевдоэлемтов :before и :after.

Пример HTML кода для нумерованного списка OL


Цвет нумерации для OL LI

Для задания цвета нужно переопределить нумерацию через псевдоэлемт ol li:before

Рабочий пример цвета нумерации для OL
  1. Текстовый блок №1
  2. Второй текстовый блок
  3. Текстовый блок №4
  4. Четвертый текстовый блок

CSS код


Большие цифры для OL LI

Для задания размера font-size для ol необходимо переопределить нумерацию через псевдоэлемт ol li:before

Рабочий пример больших цифр для OL
  1. Текстовый блок №1
  2. Второй текстовый блок
  3. Текстовый блок №4
  4. Четвертый текстовый блок

CSS код


Квадратные нумерованные маркеры для OL LI

Для задания квадратных маркеров мы переопределяем стандартную нумерацию через псевдоэлемт ol li:before

Рабочий пример цвета нумерации для OL
  1. Текстовый блок №1
  2. Второй текстовый блок
  3. Текстовый блок №4
  4. Четвертый текстовый блок

CSS код


Круглые маркеры для OL LI

Для вывода круглых маркеров в CSS нужно переопределить нумерацию через псевдоэлемт ol li:before

Рабочий пример цвета нумерации для OL
  1. Текстовый блок №1
  2. Второй текстовый блок
  3. Текстовый блок №4
  4. Четвертый текстовый блок

CSS код


Отбивающая вертикальная линия для OL LI

Для задания разграничительной линии нужно переопределить нумерацию через псевдоэлемт ol li:before и указать абсолютом линию через ol:before

Рабочий пример цвета нумерации для OL
  1. Текстовый блок №1
  2. Второй текстовый блок
  3. Текстовый блок №4
  4. Четвертый текстовый блок

CSS код


Пошаговый список для OL LI

Связный между собой пошаговый список на CSS стилях

Рабочий пример цвета нумерации для OL
  1. Текстовый блок №1
  2. Второй текстовый блок
  3. Текстовый блок №4
  4. Четвертый текстовый блок

CSS код


Помогла ли вам статья?
355 раз уже помогла
Комментарии: (0)

КАТЕГОРИИ