Different color list-style and text of list items using CSS

CSS
So I ran into this issue recently, and wanted to put it up on my blog to remember. If it helps someone else, that is cool too!

Many times when end users would like their list items to have a different color than the character used in the list-style-type, it has been suggested to put the text in a span and over load the span, add a class to the span or inline the style change.

ul > li > span{
    color: orange;
}

ul > li > span{

color: orange;

}

I ran across a way to do it in just css and it lets the end user avoid using span or inline syles.

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

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

li:before {
    content: "• ";
    color: orange; 
}

ul {

list-style: none;

padding:0;

margin:0;

}

li {

padding-left: 1em;

text-indent: -.7em;

}

li:before {

content: "• ";

color: orange;

}

I saw this on a stack over flow question here

The basics of the method is to remove the list-style, adjust and add the content with color change before the list item. Pretty simple and clean for end users to just keep on moving and not worry about formatting the list items.

happy styling.