Sam Sam - 5 months ago 22
CSS Question

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

Imagine a simple unsorted list with some

<li>
items. Now, I have defined the bullets to be square shaped via
list-style:square;
However, if I set the color of the
<li>
items with
color: #F00;
then everything becomes red!

While I ONLY want to set the color of the square bullets. Is there an elegant wat to define only the color of the bullets in CSS without using any sprite images nor span tags?

HTML

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>


CSS

li{
list-style:square;
}

Answer

The most common way to do this is something along these lines:

ul {
    list-style: none;
    padding:0;
    margin:0;
}

li { 
    padding-left: 1em; 
    text-indent: -.7em;
}

li:before {
    content: "• ";
    color: red; /* or whatever color you prefer */
}

Live demo: http://jsfiddle.net/leaverou/ytH5P/

Will work in all browsers, including IE from version 8 and up.