Стилизация номеров строк (цифр) в упорядоченных списках ol

Если вы когда-либо пробовали изменять css-стили номеров строк (цифр) в упорядоченных списках <ol>, то, наверняка, сталкивались с проблемами. Достучаться до стилей этих элементов при помощи css-селекторов невозможно. А ведь довольно часто дизайн интерфейса предполагает изменение иx цвета, фона, размера и т.д.

Вот самый простой пример нестилизованного списка:

html

<ol>
  <li> Посадить дерево </li>
  <li> Построить дом </li>
  <li> Вырастить сына </li>
</ol>

не стилизованный список ol

Давайте рассморим несколько способов решения вышеописанной задачи.

Традиционно топорный способ.

Традиционный способ решения этой проблемы сводится к тому, чтобы скрыть номера строк, автоматически расставленные браузером. При этом используется свойство list-style: none;.

Далее в начало каждого элемента списка добавляется <span> с жестко забитым туда числом. После таких манипуляций можно легко задать css-свойства для вышеупомянутых span-ов.

css

li{
  list-style: none;
}

.num{
  color: white;
  background: #2980B9;
  display: inline-block;
  text-align: center;
  margin: 5px 10px;
  line-height: 40px;
  width: 40px;
  height: 40px;
}

html

<ol>
  <li><span class="num">1</span> Посадить дерево </li>
  <li><span class="num">2</span> Построить дом </li>
  <li><span class="num">3</span> Вырастить сына </li>
</ol>

стилизованный список ol span

Согласитесь, выглядит избыточно и не гибко. Мы скрываем автоматически расставленные порядковые номера и заменяем их вручную заданными значениями, засоряем верстку и т.п.

Давайте посмотрим, как можно добиться такого же результата, не засоряя верстку и используя псевдоэлемент ::before и css-свойства content, counter-increment, counter-reset.

Красивый и правильный способ.

Вначале мы приведем код и демку, а потом разберемся, что к чему.

css

ol{
  counter-reset: myCounter;
}

li{
  list-style: none;
}

li:before {
  counter-increment: myCounter;
  content:counter(myCounter);
  color: white;
  background: #2980B9;
  display: inline-block;
  text-align: center;
  margin: 5px 10px;
  line-height: 40px;
  width: 40px;
  height: 40px;
}

html

<ol>
  <li> Посадить дерево </li>
  <li> Построить дом </li>
  <li> Вырастить сына </li>
</ol>

стилизованный список ol before

Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css.

Давайте разберем по пунктам:

• li::before — создает внутри списка псевдоэлемент, который становится на место первого потомка.
• counter-reset:myCounter; — обнуляет css-счетчик myCounter внутри каждого <ol>.
• counter-increment: myCounter; — инкрементирует css-счетчик myCounter для каждого псевдоэлемента ::before.
• content:counter(myCounter); — выводит текущее значение счетчика myCounter внутри псевдоэлемента ::before.

подробнее о css-счетчиках можно посмотреть в спецификации.

Вложенные списки и неограниченные возможности стилизации номеров строк.

Вот более интересный пример, сделанный по тому же принципу. Мы не будем приводить в статье html и сss, просто загляните в исходный код.

стилизованный список ol рецепт

Поддержка браузерами

CSS-счетчики, так же как и псевдоэлементы ::before и ::after, с давних пор поддерживаются браузерами:

css-counters поддержка браузерами

PDF и версия для печати