Оформление маркеров списков в html, многоуровневые списки

Маркеры списков в html, в таких как ol, можно стилизовать через css. Менять можно как цвет, размер, шрифт номера пункта, так и сами номера.

Для редактирования внешнего вида номеров пунктов нужно прописывать стили для

ol li:before {
  color: red;
  font-size: 9px;
}

Если нужно изменить контент, например когда стоит задача сформировать многоуровневый нумерованный список, нужно воспользоваться свойством counter-reset. Оно задает идентификатор для пользовательского счетчика элементов li.

li {
  /* уберем текущую нумерацию элементов */
  list-style-type: none;
}

ol {
  /* задаем идентификатор для счетчика первого уровня */
  counter-reset: list1;
}

ol li:before {
  counter-increment: list1; /* увеличиваем значение счетчика */
  content: counter(list1) ". "; /* выводим номер элемента */
}

ol ol {
  counter-reset: list2; /* инициируем счетчик вложенного списка (с элементами второго уровня) */
}

ol ol li:before {
  counter-increment: list2; /* увеличиваем значение счетчика вложенного списка */
  content: counter(list1) "." counter(list2) ". "; /* выводим число */
}
Многоуровневый список

Многоуровневый список

Иногда возникает надобность для полного соответствия верстки макету убрать точки у номеров пунктов. В файл стилей следует добавить такой код

li {
  list-style-type: none;
}
ol {
  counter-reset: list;
}
ol li:before {
  counter-increment: list;
}
Нумерованный список без точек

Нумерованный список без точек

Для того, чтобы подставить ноль перед цифрой счетчика:

ol li:before {
 content: counter(list, decimal-leading-zero);
}

 

Статья оказалась полезной? Вырази благодарность - поделись в соцсетях

Отзывы : Один комментарий

  1. Спасибо, очень пригодилось!

    В коде для маркеров без точек у вас потерялась строка
    content: counter(list)

Комментирование отключено