Нестандартный нумерованный список с помощью CSS

Иногда дизайнеры вносят в проект нестандартные вещи и порой это касается нумерованных списков. А нам верстальщикам приходится воплощать работы дизайнеров и наших заказчиков, которые утверждают дизайн-макет сайта, в жизнь. Итак, давайте посмотрим, как можно реализовать нестандартный нумерованный список с помощью CSS. Чтобы понимать о чём идёт речь я представлю один из вариантов на изображении ниже.

В CSS имеется свойство counter-reset. По сути оно отвечает за инициализацию счётчика. То есть при каждом создании на вашей странице сайта нового списка счёт элементов будет происходить уже для этого списка, при этом подсчёт для другого списка не будет учитываться.

Пример CSS кода:

ol {
  counter-reset: counter-list;
}

В этом фрагменте counter-list — это всего лишь идентификатор, в котором будет храниться счётчик. Имя вы можете использовать любое по вашему усмотрению.

Далее нам нужно просто прописать правила для каких элементов увеличивать счётчик, в нашем случае элемент списка (тэг li), и выводить его текущее значение. В CSS есть свойство counter-increment, которое отвечает за увеличение счётчика заданного в свойстве counter-reset. За вывод текущего значения счётчика мы будем использовать псевдоэлемент ::before.

Итоговый CSS код по увеличению и выводу значения счётчика:

ol li {
  list-style-type: none;
  list-style-position: outside;
  margin: 10px 0;
}
ol li::before {
  counter-increment: counter-list;
  content: counter(counter-list);
 
  border: 1px solid #666;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  color: #666;
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  font-family: sans-serif;
  height: 18px;
  line-height: 18px;
  margin: 0 15px 0 0;
  text-align: center;
  vertical-align: middle;
  width: 18px;
}

Как видим, чтобы реализовать нестандартный по дизайну нумерованный список требуются всего лишь знания вышеописанных CSS свойств. Хочу также заметить, что эти свойства вы можете использовать и для других тэгов.

Понравилась статья? Поделись: