Стилизация нумерованного списка ol, при помощи счётчика CSS

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

Традиционный подход к решению проблемы заключается в том, что бы блокировать отрисовку нумерации списка браузером, установленную по умолчанию, и избавившись от стандартной нумерации элементов (li) вставить вместо них жёстко заданные числа. Это дает возможность оформить их так, как мы хотим.

Визуально это работает, но такое использование списков не верно с семантической точки зрения. Если смотреть такой псевдонумерованный список с отключенным CSS то мы увидим либо дублирующуюся нумерацию, либо и маркеры и нумерацию вместе.

Приведём код и пример, а потом разберемся, что к чему.

<ol>
    <li>Влюбиться</li>
    <li>Завести собаку</li>
	<li>Посадить дерево</li>
	<li>Построить дом</li>
	<li>Воспитать сына</li>
	<li>Воспитать дочь</li>
</ol>

ol{
  counter-reset: myCounter;
}

li{
  list-style: none;
  line-height: 20px;
  margin: 0 0 8px 0;
}

li:before {
  counter-increment: myCounter;
  content: counter(myCounter);
  color: white;
  background: $color2;
  display: inline-block;
  text-align: center;
  line-height: normal;
  height: auto;
  width: auto;
  margin: 0 10px 0 0;
  padding: 0 8px;
}

1. Влюбиться
2. Завести собаку
3. Посадить дерево
4. Построить дом
5. Воспитать сына
6. Воспитать дочь

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

Основные моменты:

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

Написать комментарий