How to set Bullet colors in UL/LI html lists via C

Question

This question already has an answer here:

• Change bullets color of an HTML list without using span 10 answers

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

A variation of Lea Verou solution with perfect indentation in multi-line entries could be something like this:

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

li{
    padding-left: 1.5em; 
}

li:before {
    position: absolute;
    content: "•";
    color: red;
    left: 0;
}

Answer 2

I tried this and things got weird for me. (css stopped working after the :after {content: "";} part of this tutorial. I found you can color the bullets by just using color:#ffffd; on the li item itself.

Here's an example.

li{
    color:#ff0000;    
    list-style:square;                
}
a {
    text-decoration: none;
    color:#00ff00;
}

a:hover {
    background-color: #ffffd;
}

Answer 3

The easiest thing you can do is wrap the contents of the <li> in a <span> or equivalent then you can set the color independently.

Alternatively, you could make an image with the bullet color you want and set it with the list-style-image property.

Answer 4

The current spec of the CSS 3 Lists module does specify the ::marker pseudo-element which would do exactly what you want; FF has been tested to not support ::marker and I doubt that either Safari or Opera has it. IE, of course, does not support it.

So right now, the only way to do this is to use an image with list-style-image.

I guess you could wrap the contents of an li with a span and then you could set the color of each, but that seems a little hackish to me.

Answer 5

Yet, another solution is to use a :before pseudo element with a border-radius: 50%. This will work in all browsers, including IE 8 and up.

Using the em unit allows responsiveness to font size changes. You can test this, by resizing your jsFiddle window.

ul {
    list-style: none;
    line-height: 1em;
    font-size: 3vw;
}

ul li:before {
    content: "";
    line-height: 1em;
    width: .5em;
    height: .5em;
    background-color: red;
    float: left;
    margin: .25em .25em 0;
    border-radius: 50%;
}

jsFiddle

You can even play with the box-shadow to create some nice shadows, something that will not look nice with the content: "• " solution.

Answer 6

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