Главная » Вебмастеру » Как изменить цвет маркеров в списке?
Воскресенье, Февраль 3rd, 2019

Как изменить цвет маркеров в списке?

Существует два популярных способа изменения цвета маркеров, чтобы они отличались от цвета текста.

Использование <span>

Внутрь каждого элемента <li> вкладываем <span>, а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы

<li>текст</li>

создаем конструкцию

<li><span>текст</span></li>

При этом цвет маркеров определяется стилевым свойством color для селектора li, а цвет текста — для селектора span (пример 1).

Пример 1. Использование вложенных тегов

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет текста и маркеров в списке</title>
<style>
li {
color: red; /* Цвет маркеров */
}
li span {
color: green; /* Цвет текста */
}
</style>
</head>
<body>
<ul>
<li><span>Скрипка</span></li>
<li><span>Гитара</span></li>
<li><span>Волынка</span></li>
<li><span>Шарманка</span></li>
<li><span>Челеста</span></li>
</ul>
</body>
</html>

Читайте также »   Как сделать горизонтальную линию?

Результат данного примера показан ниже (рис. 1).

Как изменить цвет маркеров в списке?

Рис. 1. Маркеры, отличающиеся по цвету от основного текста

Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять <span>.

Использование ::before

Смысл в следующем — убираем оригинальные маркеры списка через свойство list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента ::before и свойства content. Такая связка позволяет вставлять любой текст или символ перед элементом, в данном случае <li>. Причём видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2.

Читайте также »   Как добавить рамку вокруг ячеек?

Пример 2. Использование псевдоэлемента ::before

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет маркеров в списке</title>
<style>
li {
list-style-type: none; /* Прячем исходные маркеры */
}
li::before {
color: red; /* Цвет маркера */
content: "▪"; /* Сам маркер */
padding-right: 10px; /* Расстояние от маркера до текста */
}
</style>
</head>
<body>
<ul>
<li>Север</li>
<li>Юг</li>
<li>Запад</li>
<li>Восток</li>
</ul>
</body>
</html>

Результат данного примера показан на рис. 2.

Как изменить цвет маркеров в списке?

Рис. 2. Маркеры, созданные с помощью стилей

Источник