html - How can I change the color of the dot in an unordered list?

Question

I want to change the color of dots in an unordered list:

<ul>
<li></li>
</ul>

Is there a way that I can do this with CSS? I can't see a property?

Answer 1

The easiest (but rather unsemantic) way is to wrap the content in span tags, then apply the bullet color to li and text color to span.

In code:

<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 preview

If you can't modify your HTML, you can either use list-style-image with a custom-colored dot, or use generated content (i.e. li:before) and color it accordingly (but watch out for list bullet position problems).

Here's an example with 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;
}