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

Ale*_*lex 5 css printing image stylesheet hyperlink

我正在创建一个打印样式表,我想通过在链接和图像旁边显示链接URL来使网站尽可能地可访问.

对于简单的链接,我发现了这个解

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

a:link:after, a:visited:after { content:" [" attr(href) "] "; }
Run Code Online (Sandbox Code Playgroud)

它有效.但对于图像链接,这将从文本旁边的内容属性"浮动"文本,整个布局混乱......

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

Stu*_*ows 2

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

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

如果您发现需要特定图像/区域的帮助,请发布示例或图像来帮助我们!

哈:)