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

jquery html css html-lists listitem
Paolo picture Paolo · Apr 11, 2011 · Viewed 14.9k times · Source

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

Frédéric Hamidi picture Frédéric Hamidi · Apr 11, 2011

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.

Related questions

Number nested ordered lists in HTML

I have a nested ordered list. <ol> <li>first</li> <li>second <ol> <li>second nested first element</li> <li>second nested secondelement</…

Read More
Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More
Click button copy to clipboard using jQuery

How do I copy the text inside a div to the clipboard? I have a div and need to add a link which will add the text to the clipboard. Is there a solution for this? <p class="content"&…

Read More