As we know, designers can never leave well enough alone. The default css behavior is for bullets to be the same color as their associated list item <li>. Although there are a number of solutions on the internet, this is the most simple, elegant, and universally compatible.
Here is an example of what we’re looking to accomplish:
- Bullet-List Item 1
- Bullet-List Item 2
- Bullet-List Item 3
- Bullet-List Item 4
- Bullet-List Item 5
Note how the bullets are red and the list-item text is blue. Now, let’s take a look at the code:
Standard code:
<ul id=”ex_list”>
<li>Bullet-List Item 1</li>
<li>Bullet-List Item 2</li>
<li>Bullet-List Item 3</li>
<li>Bullet-List Item 4</li>
<li>Bullet-List Item 5</li>
</ul>
In order to style the bullets and text seperately, we must enclose the <li> text within <span> tags:
<ul id=”ex_list”>
<li><span>Bullet-List Item 1</span></li>
<li><span>Bullet-List Item 2</span></li>
<li><span>Bullet-List Item 3</span></li>
<li><span>Bullet-List Item 4</span></li>
<li><span>Bullet-List Item 5</span></li>
</ul>
Now that we have the xhtml setup correctly, all we have to do is perform some minor CSS changes:
#ex_list li{
color: blue; /* The color you want the bullets to be */
}
#ex_list li span{
color: red; /* The color you want the bullets to be */
}
