Optimize Your Links For Print Using CSS: Show The URL
Optimize Your Links For Print Using CSS: Show The URL
Join the DZone community and get the full member experience.
Join For FreeJumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
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!
Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.
Like This Article? Read More From DZone
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}