跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索
打印样式表
代码片段 → CSS → 链接后打印 URL

链接后打印 URL

Avatar of Chris Coyier
Chris Coyier 于 2019 年 8 月 15 日
@media print {
  a::after{
    content: " (" attr(href) ") ";
  }
}
嘘! 创建一个 DigitalOcean 账户并获得 200 美元的免费信用额度 用于基于云的托管和服务。

评论

  1. Montana Flynn
    评论永久链接# 2009 年 9 月 4 日

    简直太棒了。一个关于打印样式表的优秀教程!感谢 Chris!

    回复
    • abajan
      评论永久链接# 2009 年 9 月 13 日

      好吧,Chris 已经有一个关于 打印样式表 的视频教程,非常好。

  2. Ahmad Awais
    评论永久链接# 2011 年 8 月 9 日

    这里有个演示会方便很多!

    回复
    • Alex
      评论永久链接# 2019 年 10 月 14 日

      演示 http://www.cssdesk.com/tZ6LY

  3. Viv
    评论永久链接# 2013 年 3 月 12 日

    演示可以在这里找到
    http://jsfiddle.net/duemF/

    也可以通过添加 color: #000 将链接颜色设置为黑色,但 text-decoration: none; 似乎不起作用。

    回复
  4. Thomas
    评论永久链接# 2013 年 5 月 2 日

    如果您好奇浏览器支持情况,请参阅 CSS tricks 中的条目:
    伪元素 (:after)
    以及
    CSS content 属性

    回复
  5. Joobleblob
    评论永久链接# 2014 年 7 月 8 日

    不知道有没有人知道一种不错的方法可以做到这一点,但要排除选择链接中的 > “mailto:”?

    回复
    • Vernon Fowler
      评论永久链接# 2015 年 7 月 30 日

      您可以使用属性选择器通过使用匹配以 http 开头的 href 的正则表达式过滤掉 mailto: 链接 – 请参阅 https://css-tricks.org.cn/attribute-selectors/ 这也将包括使用 https 协议的链接。

      类似以下内容,但在正确的位置添加 :after。

      @media print{
       a[href^="http"] { /* do stuff */ }
      }
      
    • bpj
      评论永久链接# 2017 年 3 月 11 日

      通常,将您希望以这种方式显示的这些链接赋予一个类很有用——我通常将其称为 .external——以便 mailto: 链接和内部链接 (href="#foo") 不会在打印输出中显示。

      顺便说一句,您不应该在右括号后插入任何空格。如果它正好出现在某个标点符号之前会怎样!?

  6. Patrick H. Lauke
    评论永久链接# 2018 年 5 月 18 日

    随机:如果出于某种原因,您使用链接(带有适当的 ARIA 角色属性)充当按钮或其他任何东西,您可能希望将这些链接也排除在打印其 href 之外……类似于

    a[href]:not([role]):after,
    a[href][role=”link”]:after { content:” (” attr(href) “) “; }

    回复
  7. Dean
    评论永久链接# 2018 年 6 月 4 日

    太棒了。这正是我想要的,而且我在我最喜欢的网站之一上找到了它。

    回复
  8. Isaac Lloyd
    评论永久链接# 2019 年 10 月 17 日

    这真是天才!

    回复
  9. J. Hogue
    评论永久链接# 2020 年 11 月 11 日

    有没有办法强制显示整个 URL?例如,我隐藏了导航中的所有链接,除了带“current”类的链接,并在页面打印版本中将其旁边的 URL 作为一种面包屑显示。我得到 页面标题 (/about-us),但希望看到 页面标题 (https://site.com/about-us)。这可能吗?

    回复
    • Geoff Graham
      评论永久链接# 2020 年 11 月 11 日

      您可以将顶级域名添加到 content 属性中

      a::after{
        content: " (https://www.site.com"attr(href) ") ";
      }

      当然,这只有在域在所有地方都一致的情况下才能起作用。

发表回复 取消回复

您的电子邮件地址不会被公开。 必填字段标有 *

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费信用额度!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告
  • 联系我们
社交媒体
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.