Problem
Solution
Instruct the browser to print the URLs of links in a paragraph
by using the :after pseudo-element:
p a:after {
content: " <" attr(href) "> " ;
}
Discussion
Selector constructs such as :after are known as pseudo-elements.
The browser interprets the selector as though additional elements were used to
mark up the web document.
For example, by using the following CSS, you can make the first
letter of a paragraph two-em units in size:
p:first-letter {
font-size: 2em;
}
You use the :after selector (or the :before selector) to insert generated
content after (or before) an element. In this Recipe, the value of the
href attribute, which contains the URL information, is placed after
every anchor element in a p element.
To have brackets appear around the URL, place the quotes around
the brackets. To add a buffer of space between the anchor element and the next
inline content, put one space in front of the left bracket and one after the
right bracket, then insert the URL using the attr(x) function. Whatever
attribute is replaced for x, CSS finds the attribute in the element,
returning its value as a string.
Another example of the power of this pseudo-element involves
returning the value of abbreviations and acronyms in a buzzword-laden document.
To accomplish this, first put the expanded form of the word or phrase in the
title attribute for abbr or acronym:
<p>The <acronym title="World Wide Web Consortium">W3C</a> makes wonderful things like <abbr title="Cascading Style Sheets">CSS</abbr>!</p>
Then, in the CSS rules, tell the browser to return the value
for the title attribute:
abbr:after, acronym:after {
content: " (" attr(title) ") ";
}
Currently, generating content through pseudo-elements works
only in Netscape 6+, Mozilla, and Safari browsers.
