05.09.2016

Как сделать цвет маркера в списке отличающимся от основного цвета

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

  • Утро
  • День
  • Вечер
  • Ночь

Вопрос. Как это можно сделать?

 

Давайте разберем несколько самых простых способов.

 

Способ 1. Задать отдельно цвет текста и цвет маркера

Самый очевидный способ вложить внутрь тега <li> тег <span>.

Для начала зададим стили:

 <STYLE>

  LI {COLOR:RED;}

  SPAN{COLOR:BLUE}

 </STYLE>

Вот так   будет выглядеть сам список:

<UL>

  <LI><SPAN>Осень</SPAN></LI>

  <LI><SPAN>Зима</SPAN></LI>

  <LI><SPAN>Весна</SPAN></LI>

  <LI><SPAN>Лето</SPAN></LI>

</UL>

Вот фрагмент кода и вид списка:

 

Код

Список

Если мы основной цвет сделаем зеленым и для тега <UL type="circle"> укажем атрибут типа маркера:

 

код

 

получим вот такой список:

 

Список

С этим все понятно.

 

Способ 2. Создаем собственные маркеры.

 Первый способ хорош, если нам надо "раскрасить" один список. А если такая конструкция должна быть везде на сайте, способ не удобен, так как каждый раз к спискам придется добавлять тег <SPAN>.

Рассмотрим еще один способ. Для начала нужно убрать маркеры, установленные для списков по умолчанию.

Делается это с помощью свойства list-style-type.

Затем с помощью псевдоэлемента :before и свойства content задаем собственные маркеры.

Вот такой код пишем:

 

списоксписок

Вот такой список получаем. В качестве маркера используется звездочка.

 

Список