Graphics Programs Reference
In-Depth Information
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 ;}
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.
It's a fairly common practice to wrap the entirety of a page's content in a “wrapper” div ,
something like this:
Search WWH ::

Custom Search