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

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

I know it's a bit of a late answer for this post, but for reference...

CSS

ul {
    color: red;
}

li {
    color: black;
}

The bullet colour is defined on the ul tag and then we switch the li colour back.

I would recommend giving the LI a background-image and padding-left. The list-style-image attribute is flakey in cross-browser environments, and adding an extra element, such as a span, is unneccessary. So your code would end up looking something like this:

li {
  background:url(../images/bullet.png) 0 0 no-repeat;
  list-style:none;
  padding-left:10px;
}

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

I use jQuery for this:

jQuery('li').wrapInner('<span class="li_content" />');

& with some CSS:

li { color: red; }
li span.li_content { color: black; }

maybe overkill, but handy if you're coding for a CMS and you don't want to ask your editors to put an extra span in every list-items.

I simply solve this problem like this, which should work in all browsers:

ul li {
  color: red
}

ul li span {
  color: blue;
}

<ul>
  <li><span>Foo</span></li>
  <li><span>Bar</span></li>
  <li><span>Bat</span></li>
</ul>

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:#ddd; 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: #ddd;
}

Taking Lea's demo, here's a different way of making unordered lists, with borders: http://jsfiddle.net/vX4K8/7/

HTML

<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.</li>
        <ul>
        <li>Son</li>
        <li>Of</li>
            <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.</li>
            </ul>
        </ul>
</ul>

CSS

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

ul:first-child {
   padding: 0;
}

li {
    line-height: 180%;
    border-bottom: 1px dashed #CCC;
    margin-left: 14px;
    text-indent: -14px;
}

li:last-child {
    border: none;
}

li:before {
    content: "";
    border-left: 4px solid #CCC;
    padding-left: 10px;
}

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.

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

This will do it..

li{
  color: #fff;
}

I am adding my solution to this problem.

I don't want to use image and validator will punish you for using negative values in CSS, so I go this way:

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

li          { padding-left:0.75em; position:relative; }

li:before       { content:"•"; color:#e60000; position:absolute; left:0em; }

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.

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.

Lea Verous solution is good but i wanted more control over the position of the bullets so this is my approach:

.entry ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* hide overflow in the case of floating elements around ... */
    overflow: hidden;
}
.entry li { 
    position: relative;
    padding-left: 24px;
}
.entry li:before {
    /* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */
    position: absolute;
    content: "• ";
    color: #E94E24;
    font-size: 30px;
    left: 0;
    /* use fonts like "arial" or use "sans-serif" to make the dot perfect round */ 
    font-family: Arial, sans-serif;
}

One way to do it is using li:before with content: "" and styling it as inline-block element.

Here is a working code snippet:

ul {_x000D_
  list-style-type: none; /* no default bullets */_x000D_
}_x000D_
_x000D_
ul li { _x000D_
  font-family: Arial;_x000D_
  font-size: 18px;_x000D_
}_x000D_
_x000D_
ul li:before { /* the custom styled bullets */_x000D_
  background-color: #14CCBB;_x000D_
  border-radius: 50%;_x000D_
  content: "";_x000D_
  display: inline-block;_x000D_
  margin-right: 10px;_x000D_
  margin-bottom: 2px;_x000D_
  height: 10px;_x000D_
  width: 10px;_x000D_
}

<ul>_x000D_
  <li>Swollen joints</li>_x000D_
  <li>Pain in hands and knees</li>_x000D_
  <li>Redness around joints</li>_x000D_
  <li>Constant fatigue</li>_x000D_
  <li>Morning stiffness in joints</li>_x000D_
  <li>High fevers</li>_x000D_
  <li>Rheumatoid nodules, which develop around joints</li>_x000D_
</ul>