HTML and CSS Reference
In-Depth Information
p.note:before {
content:"[";
}
p.note:after {
content:"]";
}
The result (Figure 3-4) is a smaller, lighter, bracketed block of text, without those silly
brackets sitting in our markup. The
content
property simply contains the character(s) we want
to display
before
and
after
the
p
element. The sky is essentially the limit for what can be gener-
ated (to explore the possibilities, check out the W3C's reference on generated content:
www.w3.org/
TR/CSS21/generate.html
).
Figure 3-4.
Safari's rendition of our generated brackets
One popular (and more complex) use of the
:after
pseudo-element is to display the URI
for all external links when a page is printed, following the actual link text. This can be accom-
plished by placing the following rule (which combines the
:after
pseudo-element with an
attribute selector) in your print style sheet:
a[href^='http://']:after {
content:" [" attr(href) "]";font-size:90%;
}
In cooperation with the attribute selector, this rule tells the browser, “If the
href
attribute
of an
a
element includes
http://
, place the content of the
href
attribute after the
a
element
and reduce its font size to 90 percent.” This selector shows how combining different selectors
gives you a greater amount of control while keeping your markup uncluttered.
The
:before
pseudo-element works the same way, but inserts the generated content
before
the attached element. This can come in handy when, for instance, you want to display
an alternate character (in this example, a right arrow,
→
) instead of the default bullets on
unordered list items (Figure 3-5):
ul li {
list-style:none;margin:0;text-indent:-1em;
}
ul li:before {
content:"\2192 \0020";
}
The first rule disables the default bullets, and then we assign our generated version. The
content
property requires escaped hex equivalents for special characters like this, so we use
\2192
to
generate the right arrow (
\0020
inserts a space). For a complete list of ASCII codes, check out
www.ascii.cl
.
