HTML and CSS Reference
In-Depth Information
::before
and
::after
The pseudo-elements
::before
and
::after
represent placeholders for
content before and after an element's existing content.
a.help::after {
content: "(?)";
color: red;
background: yellow;
}
a.next::after {
content: url(images/right_arrow.png);
}
[...]
<p>Here is some text that contains a link to the <a class=
➥
"help" href="http://example.com/help.html">help page</a>
➥
and a link to the <a class="next" href="http://example.com/
➥
next.html">next page</a></p>
The previous code adds an arrow image after any link to a “next” document
and then a question mark after any “help” link, as shown in
Figure 10.2
.
These two hints, or similar additions using the content property, are
examples of where presentational hints introduced through design would
be different from content that would normally be in the HTML source.
Figure 10.2
Example of generated content added after links with different
class attributes.
note
The generated content is added to the content of the selected elements.
They are styled as though they are content in the original HTML tag, and
for links the added content is clickable, just like the rest of the link text is.
