在css中通过::after伪元素自动附带打印url，核心做法是在@media print媒体查询中为需要显示链接的标签（如<a></a>）设置content: attr(href)，并配合display: block或inline控制布局。这样做会在打印时于链接文本后追加其href属性的值。若需美化格式，可结合:before添加前缀符号。注意，此方法仅对设置了href属性的元素生效，且依赖于浏览器对attr()函数的支持。
如何确保链接文本与URL在同一行显示？
要让链接文本和附加的URL保持在同一行，关键在于将::after伪元素的display属性设置为inline（默认即为inline，无需显式声明），并确保父元素<a></a>也是内联元素。如果父元素被强制设为block，伪元素也会独占一行。此外，可以通过white-space: nowrap防止长URL换行。以下代码展示了如何在打印时将<a></a>内的URL直接跟在文本后。
/* CSS */
a::after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: #666;
}
@media print {
a::after {
display: inline;
}
}上述代码中，content: " (" attr(href) ")"会在链接后生成括号包裹的URL。例如，对于<a href="https://example.com">Example</a>，打印输出将为“Example (https://example.com)”。若希望URL颜色更淡以区分正文，可调整color属性。此方案适用于所有现代浏览器，且在打印预览中可见。
立即学习“前端免费学习笔记（深入）”；
如何处理非标签的超链接引用？
当需要为非<a></a>标签（如<img alt="如何在CSS中通过::after伪元素自动在打印时附带打印出URL链接？" >或自定义元素）附加URL时，需确保目标元素具有href属性或通过data-url等自定义属性存储链接。CSS的attr()函数支持读取任意HTML属性，因此可将content: attr(data-url)用于自定义属性。例如，为<img alt="如何在CSS中通过::after伪元素自动在打印时附带打印出URL链接？" >添加打印时的图片源URL，可在CSS中定义img::after { content: " [" attr(src) "]"; }。这种方法扩展了::after的使用场景，但需注意data-url必须预先在HTML中设置。
<!-- HTML -->
<img src="image.png" data-url="https://cdn.example.com/image.png" alt="Image">
/* CSS */
img::after {
content: " [" attr(data-url) "]";
font-size: 0.7em;
color: #999;
}运行上述代码后，打印时会显示“image.png [https://cdn.example.com/image.png]”。若data-url未定义，attr()返回空字符串，不会报错。此技巧适用于文档中需要追溯资源来源的场景，如PDF导出或存档打印。实际使用时，建议统一使用data-前缀以保持语义清晰。
