应使用a[href$=".pdf"]::after配合content和background实现，需排除大小写、查询参数及锚点干扰，推荐svg内联方案并设置display:inline-block、vertical-align:middle及aria-hidden确保兼容性与可访问性。
如何用 ::after 选择器精准匹配 PDF 链接
直接写 a::after 会污染所有链接，必须限定到 PDF 文件。核心是利用属性选择器匹配 href 以 .pdf 结尾（注意大小写和查询参数干扰）：
- 推荐写法：
a[href$=".pdf"]:not([href*="?"]):not([href*="#"])—— 排除带查询参数或锚点的链接，避免误匹配report.pdf?version=1这类 URL - 更健壮的方案：用
[href*=".pdf?"]单独处理带参数的情况，或后端统一输出规范路径 - 不要用
href~="pdf"，它会错误匹配https://example.com/apdf-report.html
图标字体 vs SVG：哪个更适合 PDF 图标
图标字体（如 Font Awesome）看似方便，但存在加载延迟、字符渲染模糊、无法精确控制颜色等问题；SVG 内联更可控，尤其对单色图标：
- 推荐用
background-image+ base64 SVG：url("data:image/svg+xml,%3Csvg...%3E")，避免额外请求且兼容性好（IE11+） - 若必须用字体，确保
::after设置font-family和content（如"\f1c1"），但需注意字体未加载时显示方块 - 慎用
content: url(...)，部分旧版 Safari 对外部图片支持不稳定
样式细节：对齐、尺寸与可访问性
图标默认会破坏行高和文字基线，必须手动调整：
- 设置
display: inline-block和vertical-align: middle让图标垂直居中 - 用
width/height控制图标大小（建议1em或固定12px），避免用font-size缩放字体图标导致锯齿 - 添加
margin-left: 0.25em保持文字间距，太小挤，太大松散 - 务必加
aria-hidden="true"到链接上（或用title属性说明“PDF 文件”），否则屏幕阅读器可能重复读出图标内容
兼容性陷阱：IE 和某些邮件客户端不支持 ::after 伪元素
Outlook 桌面版（基于 Word 渲染引擎）完全忽略 ::after；IE9–IE11 虽支持但对 content 中的 SVG data URL 解析有 Bug：
- 如果必须兼容 Outlook，得退回到内联
<img>或背景图 +padding-left的传统方案 - IE 下 data URL 超过 32KB 会失效，PDF 图标 SVG 极简即可（通常
- 测试时打开 DevTools 的「禁用 CSS」再启用，确认图标是否随样式加载动态出现——这能暴露字体加载顺序问题
真正麻烦的不是怎么写，而是 PDF 链接本身可能没后缀（比如 /download?id=123），这时 CSS 无能为力，得靠服务端响应头或 JS 补充 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
