Text values for list-style-type CSS property, how?

Question

I'd like to customize the way items of unordered lists are presented.

I know I can use list-style-type to change between none, disc, circle, square and other more or less supported values. I also know it is possible to change the default appearance of list markers specifying an image to list-style-image property.

The problem is that I want to replace the bullet with large right arrow (►, ►) HTML special character instead of use a combination of list-style-image and a triangular image.

Is it possible? Btw, if this matters jQuery is already loaded on the page so it wouldn't be a problem to use it if this can help.

Answer 1

To my knowledge, it's not possible to do that using the list-style-type property.

However, if your browser supports the :before CSS selector, you can use it to insert the bullet entities before the list items. You only need to convert the entity code to hexadecimal:

ul {
    list-style-type: none;
}

li:before {
    content: "\25ba\00a0";
}

You can find a jsFiddle demonstrating this here.