CSS打印预览 - 显示图片/链接URL

Question

我正在创建一个打印样式表，我想通过在链接和图片旁边显示链接URL来使网站尽可能易于访问。

对于简单的链接，我找到了这个解决方案： http://davidwalsh.name/optimize-your-links-for-print-using-css-show-url

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

它是有效的。但对于图像链接，这将使来自内容属性的文本“浮动”到图像旁边，整个布局混乱了...

那么有没有一种方法可以在图像上方的左上角显示URL文本？或者也许在图像下面...

- Alex

Answer 1

这实际上取决于您的网站布局。例如，如果您将display:block设置为图像和:after内容，则链接URL将出现在图像下方。当然，这可能会破坏您的布局。

我怀疑您最终可能会使用许多不同的声明来针对特定区域进行样式设置。由于您可以将任何样式（包括位置）应用于追加的url，因此您应该能够逐个案例解决这个问题。

如果您发现需要针对特定图像/区域进行帮助，请发布示例或图像以帮助我们了解问题所在！

希望这有所帮助 :)

- Stuart Burrows