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);

— Натяжка вёрстки на 1С-Битрикс;

— Скрипты на PHP и JS (jQuery);

— Парсинг (CSV, XML, XLSX, JSON);

— Интеграции со сторонними сервисами по API;

— Многоязычные версии сайтов;

— и многое другое :)


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

E-mail: dmitriyribka@gmail.com

Skype: cinemacreaterus


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

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