CSS - use character for list marker

Question

Using CSS, how can I set a character like "►" as a list marker for an HTML list?

Answer 1

Use the hex value of the desired character in CSS like this:

ul li:before { 
   content: "\25BA";  /* hex of your actual character, found using CharMap */
}

Note: this will not work in IE < 8

Demo: http://jsfiddle.net/mrchief/5yKBq/

To add a space after the bullet: content: "\25BA" " ";
Demo

You can also use an image like this:

ul {
   list-style: disc url(bullet.gif) inside;
}

Answer 2

Also, if you need this in IE<8, you can use the following expression:

UL LI:before,
UL LI .before {
    content: "►"
    /* Other styles for this pseudo-element */
}

/* Expression for IE (use in conditional comments)*/
UL LI {
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="before">►</span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}