打印样式表 代码片段 → CSS → 链接后打印 URL 链接后打印 URL Chris Coyier 于 2019 年 8 月 15 日 @media print { a::after{ content: " (" attr(href) ") "; } }
简直太棒了。一个关于打印样式表的优秀教程！感谢 Chris！
好吧，Chris 已经有一个关于 打印样式表 的视频教程，非常好。
这里有个演示会方便很多！
演示 http://www.cssdesk.com/tZ6LY
演示可以在这里找到
http://jsfiddle.net/duemF/
也可以通过添加 color: #000 将链接颜色设置为黑色，但 text-decoration: none; 似乎不起作用。
如果您好奇浏览器支持情况，请参阅 CSS tricks 中的条目：
伪元素 (:after)
以及
CSS content 属性
不知道有没有人知道一种不错的方法可以做到这一点，但要排除选择链接中的 > “mailto:”？
您可以使用属性选择器通过使用匹配以 http 开头的 href 的正则表达式过滤掉 mailto: 链接 – 请参阅 https://css-tricks.cn/attribute-selectors/ 这也将包括使用 https 协议的链接。
类似以下内容，但在正确的位置添加 :after。
通常，将您希望以这种方式显示的这些链接赋予一个类很有用——我通常将其称为
.external——以便mailto:链接和内部链接 (href="#foo") 不会在打印输出中显示。顺便说一句，您不应该在右括号后插入任何空格。如果它正好出现在某个标点符号之前会怎样！？
随机：如果出于某种原因，您使用链接（带有适当的 ARIA 角色属性）充当按钮或其他任何东西，您可能希望将这些链接也排除在打印其 href 之外……类似于
a[href]:not([role]):after,
a[href][role=”link”]:after { content:” (” attr(href) “) “; }
太棒了。这正是我想要的，而且我在我最喜欢的网站之一上找到了它。
这真是天才！
有没有办法强制显示整个 URL？例如，我隐藏了导航中的所有链接，除了带“current”类的链接，并在页面打印版本中将其旁边的 URL 作为一种面包屑显示。我得到
页面标题 (/about-us)，但希望看到页面标题 (https://site.com/about-us)。这可能吗？您可以将顶级域名添加到
content属性中当然，这只有在域在所有地方都一致的情况下才能起作用。