Как убрать точки у чисел списка?

0 221

В нумерованном списке номер каждого пункта выводится с точкой. При этом как-то изменить вид числа, к примеру, убрать точку или поставить скобку, напрямую нельзя. Поэтому вообще убираем исходную нумерацию и выводим свою с помощью псевдоэлемента ::before и свойства content. Чтобы нумерация работала и увеличивалась с каждым пунктом, нужно добавить свойство counter-reset с произвольным именем счётчика для его инициализации и counter-increment для приращения счётчика. Необходимый набор свойств для создания собственной нумерации списка приведён ниже.

ol {   list-style-type: none; /* Убираем исходные маркеры */   counter-reset: my-counter; /* Задаём имя счетчика */ } li::before {   content: counter(my-counter); /* Выводим число */   counter-increment: my-counter; /* Увеличиваем значение счётчика */ }

Поскольку мы сами выводим число, то можем легко его стилизовать, изменив цвет, сделав жирным, курсивным и др. В примере 1 показан вывод и оформление нумерации.

Пример 1. Собственная нумерация

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Список</title> <style> ol { list-style-type: none; /* Убираем исходные маркеры */ counter-reset: my-counter; /* Задаём имя счетчика */ } li::before { content: counter(my-counter); /* Выводим число */ counter-increment: my-counter; /* Увеличиваем значение счётчика */ color: #ED1C24; /* Цвет текста */ font-weight: bold; /* Жирное начертание */ font-style: italic; /* Курсивное начертание */ margin-right: 0.5em; /* Расстояние от цифры до текста */ } </style> </head> <body> <ol> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> </ol> </body> </html>

Результат данного примера показан на рис. 1.

Как убрать точки у чисел списка?

Рис. 1. Вид собственной нумерации списка

Автор: Влад Мержевич
Источник: webref.ru

Оставьте ответ

Ваш электронный адрес не будет опубликован.