Делаем разный цвет маркеров списка и текста

Сначала нужно убрать стандартные маркеры списка с помощью 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.

#Верстка CSS