HTML and CSS Reference
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
<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: