Recipe 10.4. Inserting Special Characters Before Links

Problem

You want to insert special characters, for example, », before a link in a print style sheet.

Solution

Making sure your style sheet is set to print media, use the :after or :before pseudo-elements to include the URI after a link in the web document:

p a:after {  content: attr(href) ; }

Next, place the hexadecimal equivalent of the special character before the link:

p a:after {  text-decoration: underline;  content: " \00BB "  attr(href); }

When the page is printed, the text after a link may look like this:

» http://www.csscookbook.com/

Discussion

Make sure to use the backward slash to escape the hexadecimal value so the browser does not display the hexadecimal value as generic text. In this case, if the hexadecimal value for right double angle quote were not escaped, the text "00BB" would be displayed instead:

00BB http://www.csscookbook.com/

Due to the nature of CSS syntax, it is not possible to use HTML numbers or names to identify special characters with the content property. The characters need to be escaped by a backward slash and their hexadecimal value.

Special characters through CSS's content property can also be used outside the printed page. Try it within your screen media presentation of your web design. Make sure you include the CSS declaration in a style sheet with the media set to all or screen in order to view output.

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.

See Also

For a listing of special characters and their hexadecimal equivalents, see http://www.ascii.cl/htmlcodes.htm. Review the CSS 2.1 specification on escaped characters at http://www.w3.org/TR/CSS21/syndata.html#escaped-characters.