在css中通过::after伪元素自动附带打印url，核心做法是在@media print媒体查询中为需要显示链接的标签（如@#@#@#@#@#@#@#@#@#@0，打印输出将为“Example (https://example.com)”。若希望URL颜色更淡以区分正文，可调整color属性。此方案适用于所有现代浏览器，且在打印预览中可见。

如何处理非标签的超链接引用？

当需要为非标签（如或自定义元素）附加URL时，需确保目标元素具有href属性或通过data-url等自定义属性存储链接。CSS的attr()函数支持读取任意HTML属性，因此可将content: attr(data-url)用于自定义属性。例如，为添加打印时的图片源URL，可在CSS中定义img::after { content: " [" attr(src) "]"; }。这种方法扩展了::after的使用场景，但需注意data-url必须预先在HTML中设置。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

/* CSS */
a::after {
  content: " (" attr(href) ")";
  font-size: 0.8em;
  color: #666;
}

@media print {
  a::after {
    display: inline;
  }
}

运行上述代码后，打印时会显示“image.png [https://cdn.example.com/image.png]”。若data-url未定义，attr()返回空字符串，不会报错。此技巧适用于文档中需要追溯资源来源的场景，如PDF导出或存档打印。实际使用时，建议统一使用data-前缀以保持语义清晰。

<!-- HTML -->
@@##@@

/* CSS */
img::after {
  content: " [" attr(data-url) "]";
  font-size: 0.7em;
  color: #999;
}

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！