HTML and CSS Reference
In-Depth Information
Multiple counters can be employed to allow for nesting of counter values if the
counters()
function is employed. This is commonly used with outline style lists:
/* counter nesting example with counters() function showing a
value.value style outline */
ol.nest {counter-reset: counter1; list-style-type: none;}
ol.nest ol {list-style-type: none; counter-reset: counter1;}
ol.nest li:before {counter-increment: counter1;
content: counters(counter1,".") " : "; }
The values
open-quote
and
close-quote
insert quotation symbols specified by the
quotes
property, or if undefined, default to the user agent's default quote style:
q {quotes: '<< ' ' >>' "( " " )";}
/* Insert quotes before and after q element content */
q:before {content: open-quote;}
q:after {content: close-quote;}
The
no-open-quote
and
no-close-quote
values do not insert quotation symbols but
do increment or decrement the nesting level for quotes.
Finally, the
attr(
X
)
syntax returns a string value for the attribute
X
for the element the
rule is associated with. For example,
#p1:before {content: attr(title);}
when applied to
<p id="p1" title="Text from the title here! ">
I am the paragraph
</p>
would insert the
title
attribute's content “Text from the title here!” before the paragraph.
Though if the related element does not have an attribute named
X
, an empty string is used.
Examples
div.section:before {content: "Section "; font-size: xx-large;}
#div1:before {content: url(sectionstart.gif);}
#div1:after {content: url(sectionend.gif);}
blockquote:before {content: open-quote;}
blockquote:after {content: close-quote;}
p:before {content: counter(par-num, upper-roman) ". " }
p:before {content: attr(title); }
Compatibility
CSS 2, 3
IE 8+
Firefox 1.5+
Opera 9+, Safari 3+
Note
• When using attribute matches (
attr(
X
)
) for content, note that browsers may read
attributes of any name regardless of validity, but do not assume that this is the
action, because it depends greatly on the markup technology employed and how
it is supported in a browser.
