Делаем разный цвет маркеров списка и текста
Сначала нужно убрать стандартные маркеры списка с помощью list-style: none и потом добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content.
Стилями самого текста списков так же легко управлять, стили маркера не будут на него влиять.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Маркеры списка</h2> <ul> <li>Новости</li> <li>Страницы</li> <li>Теги</li> </ul> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
ul li { list-style: none; margin: 4px 0; position: relative; } ul li::before { content: "\2022"; color: #ccc; position: absolute; font-size: 18px; left: -20px; } |
А вид самого маркера легко изменить с помощью content.