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

Question

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 way to define 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 1

browsing sometime ago, found this site, have you tried this alternative?

li{     list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg=="); } 

sounds hard, but you can make your own png image/pattern here, then copy/paste your code and customize your bullets =) stills elegant?

EDIT:

following the idea of @lea-verou on the other answer and applying this philosophy of outside sources enhancement I've come to this other solution:

1. embed in your head the stylesheet of the Webfont icons Library, in this case Font Awesome:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

2. take a code from FontAwesome cheatsheet (or any other webfont icons).

i.e.: fa-angle-right [] 

and use the last part of f... followed by a number like this, with the font-family too:

li:before {     content: "\f105";     font-family: FontAwesome;     color: red; /* or whatever color you prefer */     margin-right: 4px; } 

and that's it! now you have custom bullet tips too =)

fiddle

Answer 2

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 */  }

<ul>    <li>Foo</li>    <li>Bar</li>    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>  </ul>

JSFiddle: http://jsfiddle.net/leaverou/ytH5P/

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