Влад Мержевич
Задача
Задати колір маркерів у списку, не змінюючи кольору тексту.
Рішення
Існує два способи зміни кольору маркерів, які ми назвемо простим і хитрим. Простий метод полягає в тому, що всередину тегу <li> вкладаємо тег <span>, а вже всередину нього поміщаємо текст. Іншими словами, замість традиційної схеми <li>текст</li> створюємо конструкцію <li><span>текст</span></li>. При цьому колір маркерів визначається стилевим властивістю color для селектора LI, а колір тексту — для селектора SPAN.
Результат цього прикладу показаний нижче.
Незважаючи на простоту, метод не дуже зручний, особливо при обсягових списках, оскільки для кожного пункту списку тепер доведеться додавати тег <span>. Тому розглянемо хитрий спосіб, повністю заснований на роботі з CSS.
Суть полягає в тому, що ми приховуємо оригінальні маркери списку за допомогою властивості list-style-type і додаємо власні маркери за допомогою псевдоелемента :before і властивості content.