3 ways to change the color of dot in an unordered list

• Item #1
• Item #2
• Item #3

Method 1: Modifying HMTL:

wrap the content in <span> tags, then apply the bullet color to <li> and text color to <span> seperately.

<ul>
  <li><span>Item #1</span></li>
  <li><span>Item #2</span></li>
  <li><span>Item #3</span></li>
</ul>

li {
    color: red;
}
li span {
    color: black;
}

Demo

Method 2: Use Pseudo-classes:

li: before and color it accordingly.

<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
</ul>

li {
    color: black;
    list-style-type: none;
}
li:before {
    content: '\2022';
    color: red;
    padding-right: 0.5em;
}

Demo

Method 3: Use list-style-image

with a custom-colored dot

<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
</ul>

ul {
    list-style-image: url('http://geniuscarrier.com/images/red-dot.png');
}

Demo

Let me know if you know a different way to do it.