Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Optimize Your Links For Print Using CSS: Show The URL

DZone's Guide to

Optimize Your Links For Print Using CSS: Show The URL

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

When moving around from page to page in your trusty browser, you get the benefit of hovering over links and viewing the link's target URL in the status bar. When it comes to page printouts, however, this obviously isn't an option. Most website printouts simply show the link as text with an underline. What good is that?

Providing URLs for links in the print version of your page can be extremely helpful to the reader. Using a small snippet of CSS code, you can get printouts to display link URLs right next to the link text.

The CSS Code

a:link:after, a:visited:after { content:" [" attr(href) "] "; }

The pitfall of this method of displaying links URLs for print is that Internet Explorer ignores this code. If showing link URLs is critical, I'd recommend using a javascript alternative. If not, add this snippet to your print stylesheet to make your page print-outs more informative.

Click here for an example!

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}