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;
}