UL Bullet Coloring with CSS

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>

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>

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 */