Как сделать красивый маркер в списке
galina2601 5-09-2016, 23:24 4 637 Уроки по CSS / СпискиЕсли посмотреть на списки на этом сайте, можно увидеть, что маркер у элементов списка выглядит как зеленый кружок.
- Утро
- День
- Вечер
- Ночь
Вопрос. Как это можно сделать?
Давайте разберем несколько самых простых способов.
Способ 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 задаем собственные маркеры.
Вот такой код пишем:
Вот такой список получаем. В качестве маркера используется звездочка.
Способ 3.Вместо маркера использовать картинку
Ну и способ, который используется здесь на сайте.В качестве маркера берем небольшую картинку.
И описываем следующие стили.
Задаем для тегов списка отдельный класс.
.bomb ul {margin: 0; padding: 0;}
.bomb li {list-style: none;}
.bomb ul li {background: url(../images/bomb.jpg) left 3px no-repeat; font: 14px Tahoma; color: #525252;
padding: 0 0 0 25px; margin: 0 0 10px 20px;}
</style>
<ul>
<li>Раз</li>
<li>Два</li>
<li>Три</li>
<li>Четыре</li>
<li>Пять</li>
</ul>
- Раз
- Два
- Три
- Четыре
- Пять