HTML and CSS Reference
In-Depth Information
p.note:before {
p.note:after {
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:
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 {
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 .
Search WWH ::

Custom Search