最稳写法是a[href$=".pdf" i]::after，加i标志忽略大小写且需空格分隔；content必须非空并配合display:inline-block等属性才可见；背景图方案更可靠，需注意padding与background-position配合。
用 a[href$=".pdf" i]::after 匹配 PDF 链接最稳
直接写 a[href$=".pdf"]::after 会漏掉 .PDF、.Pdf 这类大小写混用的链接，浏览器默认区分大小写。加 i 标志是唯一纯 CSS 解决方案：a[href$=".pdf" i]::after —— 注意 i 前必须有空格，引号不能省，也不能写成 "PDF" 或 "pdf"。
常见失效原因包括：
-
a[href$="pdf"]（漏掉点号）→ 会匹配apidoc、myappdf -
a[href*="pdf"]→ 匹配所有含pdf子串的 URL，误伤严重 - 中文引号或复制粘贴带不可见字符 → 整条规则静默不生效
- 链接带锚点如
report.pdf#page=2或查询参数如doc.pdf?ver=1，仍能命中，无需额外处理
::after 图标不显示？先看这三件事
::after 默认只创建一个空盒子，content: "" 不会渲染任何东西。要让图标可见，至少得组合以下一项：
- 用字体图标：
content: "\f1c1"; font-family: "Font Awesome 6 Free"; font-weight: 900; - 用 SVG 背景图：
content: ""; display: inline-block; width: 16px; height: 16px; background: url(pdf-icon.svg) no-repeat center / contain; - 用 Unicode 字符调试：
content: "?";（注意字体是否支持）
别忘了加 margin-left: 4px;，否则图标紧贴文字边缘；也别漏 display: inline-block;，否则 vertical-align 和尺寸控制全失效。
立即学习“前端免费学习笔记（深入）”；
为什么图标总被裁掉或错位
高频问题不是选择器错了，而是渲染上下文被破坏：
- 父
a元素设了overflow: hidden或text-overflow: ellipsis→::after直接被裁掉 -
a是display: block或flex→ 伪元素换行或脱离文本流，必须显式设display: inline-block - 没设
line-height或依赖em控制尺寸 → 在缩放、高 DPI 屏幕下对不齐 - 在
<button></button>或<input>上用::after→ 它们根本不支持伪元素
比 ::after 更稳的替代方案：背景图 + padding-right
伪元素依赖文本流，而背景图直接受盒模型控制，位置更确定、重排开销更低。推荐写法：
a[href$=".pdf" i] {
background: url(../icons/pdf.svg) no-repeat right center / 16px;
padding-right: 20px;
}
关键点：
-
background-position: right center中的right是相对于 content box，所以padding-right必须大于图标宽度 - 不用管
content值，也不触发伪元素重排 - SVG 图标用 data URL 内联可免托管：
url("data:image/svg+xml,%3Csvg...%3E") - 如果页面用了 Vue Router、Next.js 等语义化路由（如
/report实际返回 PDF），CSS 选择器完全失效，必须由 JS 注入data-ext="pdf"再用[data-ext="pdf"]匹配
