What I was after
One of the sites I was working on needed green bullets for unordered lists. I know there are two common workarounds to achieve this without making the text in the list items green: using an image as the list-style-image or adding span tags within the list item and targeting span tags with a specific color attribute. I didn’t want to rely on images because I felt it made the code less clean and the span tag workaround was not an option due to the non-technical authors who would be publishing posts.
The result(s)
Google’s fifth result, How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate] (http://stackoverflow.com/questions/5306640/how-to-set-bullet-colors-in-ul-li-html-lists-via-css-without-using-any-images-or), gave me the answer I was after with an entry from Lea Verou.
The important bits
Here’s what I pieced together from several comments and some tinkering to land with a version that was essentially the same result visually as the built-in unordered list style, but with the green bullet made of a text character and the authors not having to worry about any special styling during their content creation:
ul {
list-style: none;
padding:0;
margin:0 0 10px 10px;
}
ul li {
padding-bottom:4px;
padding-left: 2em;
text-indent: -2em;
}
ul li:before {
content: "■";
font-family:"Arial Black", Arial;
color:#8dc63f;
padding-right:1.5em;
position:relative;
top:-.05em;
}
ul li ul {
margin:8px 0 0 10px;
}