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.

Testimony

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.

Incompatible

I was working on something similar myself. I won't bother to post an answer now, here's where I got to: jsfiddle.net/thirtydot/ZTKuS – Obsessive

+1 beat me to it, a handy conversion calculator for those entities can be found here – Lheureux

+1 this won't work in IE6 and 7 but if that's not a necessity, it's a very nice workaround. – Nickienicklaus

Answer 2

@Frederic shows an interesting workaround that I would go with, unless you have to support IE6 and 7 - in that case, you'd have to work around with a normal HTML element that contains the character, and that you style to put it into the right place.

Something like

ul { list-style-type: none } /* Adjust margin and padding as you see fit */
ul li div.bullet { float: left; width: 30px; margin-right: 12px }

<li>
 <div class="bullet">&#9658;</div>
 List item 1
</li>

Nickienicklaus

Answer 3

If you use the :before method to get your list-style think about adding a padding to the list and a negative margin to the list-element to get the same space at line-break:

ul {
    list-style: none;
    padding: 0 0 0 24px
}
ul > li:before {
    content: '\25BA';
    float: left;
    margin-left: -24px
}

Just use the example postet from thirtydot to try in jsfiddle

Mirabel

Answer 4

It took a while, but list-style-type: <string> has arrived in Chromium.

Allows a stylesheet to use an arbitrary character for the list style marker.

Stretcherbearer