CSS counters или как задать стили для чисел в списках

Уверен, вы прекрасно знаете про нумерованные и ненумерованные списки (или же, как их еще называют, маркированные списки). Но как быть в случае, когда у нас уникальный дизайн, а соответственно и стили для таких вот списков тоже выглядят весьма уникально?

Как использовать счетчики в CSS

Подумайте сами, вот у вас макет, с такими красивыми цифрами в кружке и сами цифры размером в 30 пикселей а вот текст после них уже гораздо меньше 🙂 . Тут есть 3 пути решения (а на самом деле их гораздо больше) :

  1. вы можете нарезать это все картинками;
  2. вы можете записать все это статически через другие теги (нормальный вариант, даже для 20 элементов, если знать как быстро сформировать HTML);
  3. и наконец — использовать CSS counters.

Кстати говоря, мы рассматриваем вариант без использования JavaScript, PHP, Python и других языков программирования.
Для начала убираем наши стандартные стили у элементов списка (можно не только это делать для списков, но рассмотрим на примере их, плюс, мне кажется, так будет более верно):

Наш HTML:

и начинаем.. КВН? нет — CSS 🙂

Очень важно использовать именно на родительском элементе, а не на всех ol, как об этом вы могли прочитать в документации. Используем именно конкретный класс, не забывайте про нормальные нумерованные элементы на странице.
list — это некая переменная, которая будет увеличиваться с каждым элементом li

Если вам понадобится более сложные махинации с числами, например 1.1, 1.2, 1.3 — то наш HTML будет

А CSS:

Думаю с этим вы разберетесь. Последнее, что хотелось бы добавить —  т.к. мы используем :before, то для позиционирования:

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года.

Предоставляю услуги по созданию проектов на CMS 1С-Битрикс - сайты, шаблоны и компоненты с нуля.

Другие виды работ:
  • Доработка функционала на уже существующих проектах
  • Вёрстка макетов (HTML, CSS, JavaScript, jQuery, JADE, SASS, Gulp)
  • Скрипты на PHP и JS (jQuery)

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.

E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *