CSS: Create List Style Color Different Than List Text


I wanted to use CSS to create a Unordered List where the color of the list-style (the bullet) was different than the list-item (the text). First I set the color for the Unordered List:

.certsBlock ul {
.certsBlock ul  li {

Then I add an additional element inside the list-item (the text) and change it’s color:

.certsBlock ul  li p {
        color:#fff; /*white*/

Now I create my Unordered List:

<div class="certsBlock">
                <li><p>Item 1</p></li>
                <li><p>Item 2</p></li>
                <li><p>Item 3</p></li>

So the color of the list-style (the square bullet) will be a blue and the list-item text will be white. Easy enough.

Checkout My New Site - T-shirts For Geeks