Everyone - Thanks for all the ideas. I'll play around with them!
>-----Original Message----- >From: [email protected] [mailto:[email protected] >discuss.org] On Behalf Of Jukka K. Korpela >Sent: Tuesday, October 30, 2012 10:19 AM >To: [email protected] >Subject: Re: [css-d] way to style list item number? > >2012-10-30 18:36, Angela French wrote: > >> Is there a way (excluding using images for bullets) to style the >> bullet when it is a number or a letter? > >Yes. The simplest solution is to wrap it inside a <span> element. Of course, >you cannot do that if you use <ol> to generate the list, but as soon as we stop >thinking that we *must* use list markup for anything that looks like a list to >someone, the solution is obvious. > ><div class=list> > <div><span class=marker>1)</span> item text</div> > [...] ></div> > >This means that the numbers are part of the document data, not browser- >generated. But why not? In order to flexible maintain a list, automatic >numbering is useful, but it can usually be done server side. > >Using <ol> or <ul> markup, things get more difficult, since the ideas about >styling their markers haven't come to any conclusion. In some cases, you can >use auxiliary markup, e.g. > ><li><span>item text</span></li> > >Then you could set e.g. a red color on the <li> element, black color on the >contained <span> element, with the net effect of making the bullet red. > >You could also suppress the normal bullets (list-style-type: none) and >generate your own bullets, using generated content. > > > I'd like to try to make the number stand out and actually even wrap > it in >an <a> tag if possible to link it back to the footnote > reference in the >above >text. > >Well, if it needs to be a link, it needs to be an element, a real element (not >pseudoelement). So the obvious solution appears to be the only solution >then: > ><div class=list> > <div><a class=marker href="...">1)</a> item text</div> > [...] ></div> > >Yucca > >____________________________________________________________________ >__ >css-discuss [[email protected]] http://www.css- >discuss.org/mailman/listinfo/css-d >List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css- >discuss.org/policies.html >Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
