TIPS - CSS: Professional Techniques for Modern Layout - page 96

Figure 3-20: Variant background markers.

One drawback to this approach is that the images, being in the background, won't print for
the vast majority of users. Accordingly, you'll want to declare regular list markers in a print
stylesheet or something similar.

98

GENERATING BULLETS
h ere's an even more advanced way to do your own customized list markers, though it is
incompatible with older browsers. In this approach, you mix outdenting with generated
content (see Figure 3-21).

ul.stars li:before { content : url(star.gif) ; margin-right : 8px ;}
ul.stars li { text-indent : -20px ; list-style : none ;}

h at's it. You don't need to add any extra elements, because the generated content ef ectively
inserts its own at the beginning of each list item's content. h is does mean that the image is
being inserted as inline content, so you can vertically align it with respect to the text's baseline
and so on.

You can of course address specii c classes to get specii c icons (see Figure 3-22).

ul.stars li.m:before { content : url(star-m.gif) ;}
ul.stars li.k:before { content : url(star-k.gif) ;}