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 将出现在图像下方。 当然，这可能会破坏您的布局。

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

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

HTH:)