CSS print preview - show image/link URLs

Question

I'm creating a print stylesheet and I want to make the site as accessible as possible by displaying the link URL next to links, and images.

For simple links I found this solution:

http://davidwalsh.name/optimize-your-links-for-print-using-css-show-url

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

And it works. But for image links, this will "float" the text from the content property next to the image and the entire layout messes up...

So is there a way to display the URL text above the image, in the top left corner? Or maybe below the image...

Answer 1

This really depends on your site layout. For instance if you set display:block to the images and the :after content the link url would appear under the image. Of course this may break your layout.

I suspect you may end up using lots of different declarations for specific areas. Since you can apply pretty much any style to the appended url (including positioning) you should be able to tackle this on a case by case basis.

If you find you need assistance with specific images/areas then please post up an example or image to help us along!

HTH :)