01 мая 2016

По умолчанию цвет маркеров для списков в HTML есть таким как и сам текст. Допустим, нам нужно сделать цвет текста в списке <ol> черным, а сами цифры фиолетовыми... Конечно можно было бы усложнить код, завернув содержимое <li> в тэг <span>...

 Вот таким образом, например:

<ol>
<li><span>первый пункт нумерованного списка</span></li>
<li><span>второй пункт нумерованного списка</span></li>
<li><span>третий пункт нумерованного списка</span></li>
<li><span>четвертый пункт</span></li>
</ol>

И в CSS задать цвет для <li> фиолетовый, а для <span> - черный.

Но! Во-первых это усложняет код. Во-вторых, при использовании CMS и визуальных редакторов, этот самый тэг <span> может автоматически удаляться.

Решение:

ul 2

Упрощаем HTML код:

<ol>
<li>первый пункт нумерованного списка</li>
<li>второй пункт нумерованного списка</li>
<li>третий пункт нумерованного списка</li>
<li>четвертый пункт</li>
</ol>

CSS будет приблизительно таким:

ol {
list-style-type: none;
/* Убираем исходные маркеры */
counter-reset: item;
/* Обнуляем счетчик списка */
}

ol li {
color: #000;
}

ol li:before {
content: counter(item) '. ';
/* Добавляем к числам точку */
counter-increment: item;
/* Задаём имя счетчика */
color: #4e00ff;
padding-right: 7px;
/* отступ для красоты */
}

Допустим, нам надо заменить точку после цифры на скобку:

Меняем просто строку content: counter(item) '. '; на content: counter(item) ') ';

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





Практически весь контент размещенный на сайте, вся информация является продуктом студии WSI. Если материалы взяты с других ресурсов, то обязательно указана ссылка на эти ресурсы. Вы можете бесплатно пользоваться информацией с нашего сайта, размещать ее на своих сайтах, но так же обязательна ссылка на наш сайт, Web-Sputnik.Info.


Меню
Копирайт © 2024 'Tochcha' Все права защищены