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 [css-d@lists.css-discuss.org]
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/
