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

Ответ 1

Самый простой (но несамостоятельный) способ состоит в том, чтобы обернуть содержимое тегами span, а затем применить цвет пули к li и цвет текста к span.

В коде:

<ul>
    <li><span>text</span></li>
    <li><span>text</span></li>
    <li><span>text</span></li>
</ul>

ul li {
    /* Bullet color */
    color: red;
    list-style-type: disc;
}

ul li span {
    /* Text color */
    color: black;
}

Предварительный просмотр jsFiddle

Если вы не можете изменить свой HTML, вы можете использовать list-style-image с помощью цветной точки или использовать сгенерированный контент (т.е. li:before) и соответствующим образом покрасить его (но не забудьте о проблемах с позицией списка пули).

Здесь пример с li:before:

ul li {
    /* Text color */
    color: black;
    list-style-type: none;
}

ul li:before {
    /* Unicode bullet symbol */
    content: '\2022 ';
    /* Bullet color */
    color: red;
    padding-right: 0.5em;
}

Ответ 2

Дальнейшая разработка ответа @BoltClock:

ul li {
    color: black;
    list-style-type: none;
}

ul li:before {
    color: red;
    float: left;
    margin: 0 0 0 -1em;
    width: 1em;
    content: '\2022';
}

Таким образом, все линии многострочной пули имеют отступы должным образом. Опасайтесь: у меня еще не было возможности протестировать его в IE!

Ответ 3

Вы можете создать свое собственное изображение.

li {
    list-style-image: url(myImage.gif);
}

Ответ 4

Ни один из вышеперечисленных ответов не работает для меня, поскольку у меня есть контент, который завернут на несколько строк. Однако решение, предоставляемое W3C, отлично: https://www.w3.org/Style/Examples/007/color-bullets.en.html

Короче говоря, удалите стили:

ul {list-style: none}

Затем добавьте свою собственную марку

li::before {
content: "•";
color: red;
display: inline-block;
width: 1em;
margin-left: -1em
}

Ключевыми моментами являются встроенный блок, ширина и маржа, чтобы правильно позиционировать его.

Ответ 5

Думаю, вам нужно использовать графику:

http://catcode.com/csstips/graphic_list.html

В стороне, это также даст вам подробный контроль над позиционированием пули (с использованием полей и смещения изображения).