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

Posted 2023-03-06

【中文标题】CSS 打印预览 - 显示图像/链接 URL

【英文标题】：CSS print preview - show image/link URLs

【发布时间】：2011-09-09 01:42:18

【问题描述】：

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

对于简单的链接，我找到了这个解决方案：

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

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

而且它有效。但是对于图片链接，这会将文本从图片旁边的内容属性中“浮动”并且整个布局混乱......

那么有没有办法在图像上方的左上角显示 URL 文本？或者可能在图片下方...

【参考方案1】：

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

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

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

HTH :)