Існує два популярні способи зміни кольору маркерів, щоб вони відрізнялися від кольору тексту.
Використання <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. Маркери, створені за допомогою стилів