Generated Content - Beginning CSS3 - page 340

}
.tip::before {
content: url(images/square gray.gif) ' Tip ';
font-weight: bold;
}
.caution::before {
content: url(images/square gray.gif) ' Caution ';
font-weight: bold;
}
The ::before pseudo-element is appended to the selector in the same way as a pseudo-class. In this
example, each selector is a class, but you can use any valid selector. The value specified for content begins with
the path to the gray square image, followed by a space and the text in quotes. It doesn't matter whether you use
single or double quotes, as long as they're a matching pair. I've added a space on either side of the text to separate
it both from the icon and from the following text.
Figure 15-1. The icons and bold text are automatically generated by the pseudo-elements
Normally the generated content is displayed inline, and the text inherits the same properties as the text in
the element it's being added to. But you can style the generated content like any other element.
The styles in text_image_display.html adapt the classes in the previous example like this:
.note::before {
content: url(images/square gray.gif) ' Note ';
font-weight: bold;
display: block;
}
.tip::before {
content: url(images/square gray.gif) ' Tip ';
font-weight: bold;
display: inline-block;
vertical-align: 24px;
}
.caution::before {
content: url(images/square gray.gif) ' Caution ';