- 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; }
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; }
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'); }
Let me know if you know a different way to do it.