Recipe 10.3. Displaying URIs After Links

Problem

You need to display URIs (Uniform Resource Identifiers) of links in an article when a web page is printed.

Solution

Instruct the browser to print the URIs 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 2 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 URI information, is placed after every anchor element in a p element.

To have brackets appear around the URI, 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, and then insert the URI 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) ") ";    }

Placing the domain name before absolute links

With absolute links, only the forward slash and any other folder and filename data will appear once page is printed. To work around this dilemma, the CSS 3 specification offers a solution through a substring selector:

p a:after {  content: " <" attr(href) "> " ; } p a[href^="/"]:after {  content: " <http://www.csscookbook.com" attr(href) "> " ; }

This carat, ^, signifies that the selector picks every link that starts with the forward slash, which signifies an absolute link.

Currently, generating content through pseudo-elements works only in Firefox, Netscape 6+, Mozilla, and Safari browsers. Generated content does not work in Internet Explorer for Windows.

Also, the CSS 3 specification is not widely supported. However, since only browsers don't support substring selectors and/or styles sheets for print media, you can add the rule without fear of ruining a visitor's printout.

Problem

Solution

Discussion

Placing the domain name before absolute links

See Also