a::after在打印时默认不显示，是因为多数浏览器为避免干扰文档语义和浪费纸张，默认禁用伪元素content输出；必须在@media print中显式声明a[href]::after并正确设置content: " (" attr(href) ") "，且排除选择器、属性名、覆盖规则等错误。
直接用 @media print + a[href]::after 即可，但必须注意 content 值的格式和浏览器对伪元素在打印上下文中的渲染限制。
为什么 a::after 在打印时默认不显示？
多数浏览器（Chrome、Edge、Firefox）默认会禁用所有伪元素的 content 输出，除非显式启用。这不是 bug，而是打印样式表的保守策略：避免干扰文档语义结构或浪费纸张。
- 伪元素内容不会出现在 DOM 中，打印引擎只看 CSS 渲染树，而它默认忽略未明确声明的
::before/::after -
display: none或visibility: hidden会彻底屏蔽，但更常见的是没写@media print规则，导致样式根本没生效 - 部分旧版 Safari 对
attr(href)在打印中支持不稳定，建议加 fallback
@media print { a[href]::after } 的正确写法
必须同时满足三个条件：选择器命中、content 合法、且不被其他规则覆盖。
- 选择器要带
[href]属性限定，否则空链接或锚点（#top）也会触发，输出无效括号 -
content必须用attr(href)，不能写成attr("href")（引号非法）或attr(data-href)（属性名错） - 推荐加空格和括号包裹，提高可读性：
content: " (" attr(href) ") " - 如果链接是相对路径（如
/contact），打印时不会自动补全为完整 URL；需后端或 JS 预处理，CSS 无解
/* 正确示例 */
@media print {
a[href]:not([href^="javascript:"]):not([href^="#"])::after {
content: " (" attr(href) ") ";
font-size: 0.8em;
color: #666;
}
}容易被忽略的兼容性细节
不是所有链接都适合加 URL，尤其在 PDF 导出或企业级打印服务中，行为可能不一致。
立即学习“前端免费学习笔记（深入）”；
-
mailto:和tel:链接会原样输出，比如mailto:name@example.com，用户可能不需要看到协议头 - PDF 打印工具（如 wkhtmltopdf）可能完全忽略伪元素，此时需用 JS 注入真实文本节点作 fallback
- 某些打印机驱动会压缩行高，导致
::after文字被截断，建议加white-space: nowrap和足够line-height - IE 不支持
@media print中的伪元素，但 IE 已淘汰；若仍需支持，得用条件注释 + 额外 class
真正麻烦的不是怎么写，而是判断哪些链接值得显示 URL——内部导航链接（如 /about）打印出来毫无意义，而外部资源引用才需要溯源。这得靠业务逻辑过滤，CSS 做不了决策。
