Свой собственный вид списка

Именно про такие списки мы и поговорим. Хотя, возможно, кто-то из Вас применит это и к спискам для создания меню или просто вывода чего-то. Стандартные списки могут быть разные. Основные из них заключаются в теги ol и ul.

OL - выводит нумерованный список. Перед каждым новым элементом будет цифра по порядку.

UL - выводит список с разными маркерами. Это могут быть точки, квадраты, буквы цифры или картинка.

Хочу показать как можно внести изменения в маркировку списков и сделать ее уникальной. Покажу несколько примеров, используя которые, Вы сможете сделать необычные списки своими руками. Ниже в примере можете посмотреть что к чему.

Как сделать, чтобы после каждого номера шла круглая скобка

Первый список в примере - это добавление скобки после числа. Стандартными методами это не сделать. Для осуществления задуманного, нам понадобится использование псевдоэлемента - :before.

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

  <ol class="one">
   <li>Первый</li>
   <li>Второй</li>
   <li>Третий</li>
   <li>Четвертый</li>
  </ol>

Списку был присвоен класс - one. теперь добавим стилей и получим нужный результат.

ol.one  {
    list-style-type: none; /* Убираем исходные маркеры */
    counter-reset:  item; /* Обнуляем счетчик списка */
   }
  ol.one li:before {
    content: counter(item) ') '; /* Добавляем к числам скобку */
    counter-increment: item; /* Задаем имя счетчика */
   }

По надобности. вместо скобки можно поставить другой знак, если это конечно нужно.

Как сделать маркер в виде слова

Данный способ выведет вместо маркера слова. Например: Шаг 1, Шаг, 2 и тд. Глава 1, Глава 2, и тд. По сути все что Вы захотите, перед числовым маркером. Для этого, опять определяемся с списком и задаем ему класс.

  <ul class="tw">
   <li>Первый</li>
   <li>Второй</li>
   <li>Третий</li>
   <li>Четвертый</li>
  </ul>

Тут мы использовали ul список. Далее добавляем стили и в параметрах псевдоэлемента :before перед числом ставим слово - у нас это "Шаг", а после точка ". "

ul.tw  {
    list-style-type: none;
    counter-reset: heading;	
   }
  ul.tw li:before {
    counter-increment: heading; /* Указываем идентификатор счетчика */
    content: "Шаг " counter(heading) ". "; /* Выводим текст перед числом и после*/
	color:#f30;
   } 

Как сделать любой символ в виде маркера

Идея способа в том, чтобы заменить все стандартные маркеры на любой символ. В нашем случаи это двойной пунктир. Просто указываем нужный символ в параметре content:.

  <ul class="thr">
   <li>Первый</li>
   <li>Второй</li>
   <li>Третий</li>
   <li>Четвертый</li>
  </ul>

Ну и сами стили:

   ul.thr  {
   list-style-type: none;
   counter-reset:  item;
   }
  ul.thr li:before {
    content: '-- '; /*Добавляем символ */
   }

Как как заключить нумерованный маркер в нужные символы

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

  <ul class="four">
   <li>Первый</li>
   <li>Второй</li>
   <li>Третий</li>
   <li>Четвертый</li>
  </ul>

Стили:

  ul.four  {
   list-style-type: none;
   counter-reset:  item;
   }
  ul.four li:before {
    content: '[' counter(item) '] ';
	counter-increment: item;
	color:#f30;
   } 

Вот такие маркированные списки можно получить используя минимальные доработки в стилях. Теперь можно при написании статьи для своего сайта использовать необычные списки.

На этом все, спасибо за внимание. 🙂