HTML and CSS Reference
In-Depth Information
Figure 3-2.
Our initial cap displayed in Firefox
It's worth noting that Safari does some strange things with our very straightforward exam-
ples (see Figure 3-3); your mileage may vary when using this pseudo-element, so remember to
test and adjust the
font-size
as needed.
Figure 3-3.
Surfin' Safari, Batman! Browsers interpret the specifications differently, so you may
have to try different font sizes and line heights in order to get the same result.
:before and :after
These final pseudo-elements,
:before
and
:after
, allow you to insert generated content
before
or
after
the element they are attached to, as opposed to simply altering the display of the element's
content. The
content
property is the key to their success.
Let's start with a simple example using both
:before
and
:after
. Say you want to enclose
all paragraphs assigned
class="note"
within square brackets, in addition to changing the text
size and color, but you want to keep the brackets out of your markup. First, we add the class to
our paragraph:
<p class="note">Gorillas don't always eat bananas, all cows eat grass, good
➥
boys do fine always, and fat cops get donuts after every bust.</p>
Next, we add styles for the
.note
class (to set the
font-size
and
color
properties), then
the pseudo-element rules to generate our square brackets:
p {
font-size:85%;
color:#666;
}
