CSS - use a symbol for a list marker.

Question

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

Answer 1

Use the hexadecimal value of the desired character in CSS as follows:

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 a bullet: content: "\25BA" " ";
Demo

You can also use the image as follows:

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

Answer 2

Alternatively, 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)
    );
}