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 文本？或者可能在图片下方...

Answer 1

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

我怀疑您最终可能会针对特定区域使用许多不同的声明。由于您可以将几乎任何样式应用于附加的 url（包括定位），您应该能够根据具体情况解决这个问题。

如果您发现在特定图像/区域方面需要帮助，请发布示例或图像以帮助我们！

HTH :)