Add background color to list item bullet

Question

I have an ordered list (a, b, c...) and want to make the background color of the actual bullets (a, b, c...) a different color. How would I style this? The list-type property seems to only change the bullets, not give them added styling. I want to maintain they type="a" structure of the list and simply add a background color to each letter.

Also...can someone share with me how to center the bullets or flush them to one side? Currently, they look a little out of line.

Answer 1

Using @kingkong's comment above, you can do something like this:

ul > li:before {  
    background-color: red;
    margin-right: 5px;
    padding: 0 5px;
    content: counter(index, lower-alpha);
    counter-increment:index;
}
li:first-child {
    counter-reset:index;
}
ul li {
    list-style: none;
}

Here is a fiddle: http://jsfiddle.net/2ZsQY/

Answer 2

http://jsfiddle.net/Ue6nu/2/

The default lower-alpha will be preserved even when :before is not supported.

ul {font: 0.85em Arial;margin:0;}
li {
    list-style-position: outside;
    list-style-type: lower-alpha;
    position:relative;
}
li:first-child {
    counter-reset:index;
}
li:before {
    content: counter(index, lower-alpha) '.';
    counter-increment:index;
    background: #fff;
    position:absolute;
    left:-1.3em;
    z-index:10;
    display:inline-block;
    width:1em;
    color: red;
    font-size: inherit;
    font-weight:bold;
}