Unicode character as bullet for list-item in CSS

Question

I need to use, for example, the star-symbol(★) as the bullet for a list-item.

I have read the CSS3 module: Lists, that describes, how to use custom text as bullets, but it's not working for me. I think, the browsers simply don't support the ::marker pseudo element.

How can I do it, without using images?

Answer 1

Using Text As Bullets

Use li:before with an escaped Hex HTML Entity (or any plain text).

---

Example

My example will produce lists with check marks as bullets.

CSS:

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

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

---

Browser Compatibility

Haven't tested myself, but it should be supported as of IE8. At least that's what quirksmode & css-tricks say.

You can use conditional comments to apply older/slower solutions like images, or scripts. Better yet, use both with <noscript> for the images.

HTML:

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

---

About background images

Background images are indeed easy to handle, but...

1. Browser support for background-size is actually only as of IE9.
2. HTML text colors and special (crazy) fonts can do a lot, with less HTTP requests.
3. A script solution can just inject the HTML Entity, and let the same CSS do the work.
4. A good resetting CSS code might make list-style (the more logical choice) easier.

---

Enjoy.