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

Since these are inserted into the content of the page, they will be printed, the same as if you'd
added them with an img element or via list-style-image .
h e advantage is that instead of having to load images, you can just insert characters that you
can style independently of the content, no extra elements required. Here's how you could
replace the above styles, with the result shown in Figure 3-23:
ul.stars li { text-indent : -1.25em ; list-style : none ;}
ul.stars li:before { content : "\2605 " ;
margin-right : 0.75em ;}
ul.stars li.m:before { color : red ;}
ul.stars li.k:before { color : orange ;}
100
Figure 3-23: Generating Unicode markers.
h ere isn't quite as much precision here as you get with images and pixels, so it's possible that
the text in the i rst line won't be precisely lined up with the text in following lines. You can
generally get really close, though, and furthermore, it's only an issue if your list items will have
multiple lines of text.
YOU HAVE MORE CONTAINERS THAN YOU THINK
It's a fairly common practice to wrap the entirety of a page's content in a “wrapper” div ,
something like this: