CSS打印预览 - 显示图片/链接网址 [英] CSS print preview - show image/link URLs

问题描述

我正在创建打印样式表，并且希望通过显示链接和图片旁边的链接网址来尽可能地访问该网站。

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...

因此，有一种方法在图像上方显示URL文本，在左上角？或者下面的图片...

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

推荐答案

这真的取决于你的网站布局。例如，如果您将 display：block 设置到图像和：之后内容，链接网址将显示在图像下。当然，这可能会打破你的布局。

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.

如果您发现需要

HTH：）

这篇关于CSS打印预览 - 显示图片/链接网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！