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.
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.
Search WWH ::

Custom Search