HTML and CSS Reference
In-Depth Information
font-weight: bold;
color: #F8A809;
font-size: 24px;
font-family: Tahoma, Geneva, sans-serif;
}
As Figure
15-2
shows, the generated content in the
note
class becomes a block-level element occupying a
separate line. In the
tip
class, it's converted to an inline block and raised above the baseline. The
caution
class
changes the color, font size, and font of the generated text.
Figure 15-2.
The generated content can be styled independently of the element it's added to
■
The generated content doesn't become part of the HTML markup, so don't use
::before
and
::after
for essential content. It won't be seen by users of older browsers.
Caution
Using the
::after
pseudo-element to append generated content works exactly the same way. The
styles in image_text_after.html identify the final paragraph using the
:last-child
pseudo-class. The
::after
pseudo-element is appended to the selector to add a couple of images and some text, and style it to be centered
on a separate line like this:
p:last-child::after {
content: url(images/flourish1.png) ' The End ' url(images/flourish2.png);
display: block;
text-align: center;
color: #B20000;
margin-top: 1em;
}
As Figure
15-3
shows, this adds a stylized “The End” at the foot of the page.
