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

Figure 3-16: Starred stars.

Easy as cake. h e potential drawback here is that you don't have any control over the place-
ment of the images. h eir distance from the let edge of the list item's text, and their vertical
alignment with respect to the i rst line, are entirely under the control of the browser. You don't
have any say.

94

Now, suppose you wanted just to have regular list markers—we'll say disc s—but have the
markers be a dif erent color than the content of the list item (see Figure 3-17).

Unfortunately, it requires some structural hacking. You have to wrap the content of each list
item in an element—either a div or a span . I'll demonstrate using a div .

ul.stars { color : red ; list-style : disc ;}
ul.stars div { color : black ;}

< ul class="stars">
< li> < div>The Sun< / div> </ li>
< li> < div>V645 Centauri ( Proxima Centuari)< / div> </ li>
< li> < div>Alpha Centauri A< / div> </ li>
...
</ ul>