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 { color:#1AB7EA; } .certsBlock ul li { list-style:square; margin-bottom:5px; } |
Then I add an additional element inside the list-item (the text) and change it’s color:
.certsBlock ul li p { color:#fff; /*white*/ margin:0; } |
Now I create my Unordered List:
<div class="certsBlock">
<ul>
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
<li><p>Item 3</p></li>
</ul>
</div> |
So the color of the list-style (the square bullet) will be a blue and the list-item text will be white. Easy enough.


