HTML and CSS Reference
In-Depth Information
Figure 15-3.
The ::after pseudo-element appends generated content at the end of an element
IE 8 doesn't support the
:last-child
pseudo-class. For the preceding example to work in IE 8, you not only
need to use the single-colon version of
:after
, but also to assign a class or ID to the last paragraph and use that
as the selector, for example
p.last:after
.
■
Although the
::before
and
::after
pseudo-elements can insert images before or after other HTML
elements, they can't add generated content to an image or to other
replaced elements
such as objects and videos.
So, you can't use them, for example, to add a caption after an image. They don't work with form elements either.
Caution
Generating Content from an Attribute
The
content
property can inspect HTML tags, search for an attribute, and display the text value of the attribute.
If the attribute doesn't exist, the browser simply ignores it. To access the attribute, you insert the attribute name
(without quotes) between the parentheses of
attr()
.
This can be useful for displaying an external URL. You can use the attribute selector
a[href^="http://"]
to
style external links differently from internal ones. So it's just a question of using the
::after
pseudo-element with
the same selector like this (the code is in attribute.html):
a[href^="http://"]::after {
content: ' (' attr(href) ') ';
}
The
content
property uses
attr(href)
to extract the link's URL. It's surrounded on both sides by literal
spaces and parentheses in quotes. As Figure
15-4
shows, the pseudo-element appends the URL in parentheses
after an external link, but ignores an internal one.
