打印时a::after插入URL需显式设置content非空值，如content: " (" attr(href) ")";外链须用属性选择器限定，配合display: inline-block等样式确保稳定显示，并补充title或aria-label保障无障碍。
打印样式中 ::after 插入 URL 必须显式声明 content
浏览器在打印模式下默认不渲染 ::before 和 ::after 伪元素，除非 content 属性被明确设置为非空值。很多开发者写了样式却看不到 URL 追加，根本原因就是漏了这一步。
常见错误现象：a::after { content: attr(href); } 在屏幕正常显示，但打印预览里完全不出现——因为打印时部分浏览器（如 Chrome）会忽略空或无效的 content 值，哪怕 attr(href) 看似有值。
- 必须确保
content是可计算的非空字符串，例如content: " (" attr(href) ")"; - 避免只写
content: attr(href);，某些旧版 Edge 或 Safari 打印引擎会静默丢弃 - 建议加上兜底 fallback，比如
content: " (" attr(href, "URL") ")";（注意：attr()的第二个参数仅在部分浏览器支持，稳妥起见用字符串拼接）
链接需设 display: inline-block 或 inline-flex 才能稳定对齐
纯 inline 元素（如默认 <a></a>）上使用 ::after 时，打印引擎对伪元素的换行、断行和垂直对齐行为极不可控，常导致 URL 被截断、换到下一行，甚至消失。
使用场景：PDF 导出、浏览器「打印为 PDF」、企业内网打印系统等对排版精度要求高的环境。
立即学习“前端免费学习笔记（深入）”；
- 给链接加
display: inline-block;，让::after有确定的行内上下文 - 配合
vertical-align: baseline;防止基线偏移 - 添加
margin-left: 0.2em;保证 URL 与文字之间有合理间距，避免粘连
必须限定作用域：只对外链启用，避免内链/锚点污染页面
盲目给所有 <a></a> 加 URL 追加，会导致 #section 锚点、mailto:、tel: 甚至站内相对路径（如 /about）全部暴露，既冗余又泄露结构。
正确做法是用属性选择器精准匹配协议型外链：
-
a[href^="http://"]::after, a[href^="https://"]::after—— 最常用，覆盖绝大多数网页链接 - 慎用
a[href*="://"]，可能误伤含://的普通文本（虽罕见但存在） - 排除
javascript:和data:协议：a[href^="http"]:not([href^="javascript:"]):not([href^="data:"])::after
示例完整规则：
@media print {
a[href^="http://"],
a[href^="https://"] {
position: relative;
display: inline-block;
vertical-align: baseline;
}
a[href^="http://"]::after,
a[href^="https://"]::after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: #666;
margin-left: 0.2em;
}
}
无障碍与可读性：title 或 aria-label 不可省略
仅靠视觉追加的 URL 对屏幕阅读器用户不可见，且打印文档本身无法交互，用户无法 hover 查看原 href。如果原文本没提供足够语义（比如“点击这里”），追加的 URL 就成了唯一线索。
容易踩的坑：以为 CSS 插入就够了，结果导出 PDF 后被视障同事反馈“完全不知道链接指向哪”。
- HTML 中每个外链应自带
title属性，如<a href="https://example.com" title="Example Company homepage">官网</a> - 更推荐用
aria-label，语义更强且不受 CSS 渲染影响：<a href="https://example.com" aria-label="访问 Example Company 官网">官网</a> - 打印样式里可同步用
content: attr(aria-label);替代attr(href)，信息更友好
真正难处理的是动态生成的链接或 CMS 输出内容——这时得靠构建时注入或 JS 补充，纯 CSS 无解。别指望伪元素能读取 JavaScript 动态写的 href 值，它只认初始 HTML 属性。
