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

Custom Search