css url使用变量_使用CSS优化打印链接—显示URL

css url使用变量

When moving around from page to page in your trusty browser, you get the benefit of hovering over links and viewing the link's target URL in the status bar. When it comes to page printouts, however, this obviously isn't an option. Most website printouts simply show the link as text with an underline. What good is that?

在可信赖的浏览器中在页面之间移动时，您将获得以下好处：将鼠标悬停在链接上并在状态栏中查看链接的目标URL。 但是，当涉及到页面打印输出时，这显然不是一个选择。 大多数网站打印输出仅将链接显示为带下划线的文本。 那有什么好处？

Providing URLs for links in the print version of your page can be extremely helpful to the reader. Using a small snippet of CSS code, you can get printouts to display link URLs right next to the link text.

在页面的印刷版本中提供链接的URL对读者可能非常有帮助。 使用一小段CSS代码，您可以获取打印输出，以在链接文本旁边显示链接URL。

View Demo 观看演示

CSS代码 (The CSS Code)

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

The pitfall of this method of displaying links URLs for print is that Internet Explorer ignores this code. If showing link URLs is critical, I'd recommend using a JavaScript alternative. If not, add this snippet to your print stylesheet to make your page print-outs more informative.

这种显示打印链接URL的方法的陷阱在于Internet Explorer会忽略此代码。 如果显示链接URL非常重要，建议您使用JavaScript替代方法。 如果不是，请将此代码段添加到您的打印样式表中，以使您的页面打印输出更具信息性。

View Demo 观看演示

翻译自: https://davidwalsh.name/optimize-your-links-for-print-using-css-show-url

css url使用变量