[href$=".pdf" i]::before 是稳定添加 PDF 图标的关键写法，需严格空格、禁用大写 I；更稳方案是 background-image + padding-right。
为什么 [href$=".pdf"] 常常不显示图标
根本不是选择器写错了，而是匹配被细节卡住：[href$=".pdf"] 默认区分大小写，report.PDF、doc.Pdf 全都不命中；漏掉点号写成 [href$="pdf"]，会误中 myappdf 这类字符串；用了中文引号 “.pdf” 或前后多空格 [href$= ".pdf"]，整条规则静默失效；content: "" 不会显示任何东西——伪元素创建了，但内容为空，得填值才行。
必须加 i 标志才能覆盖大小写
a[href$=".pdf" i]::before 是稳定添加 PDF 图标的关键写法，i 标志实现大小写不敏感匹配，需严格空格、禁用大写 I：
- ✅ 正确：
a[href$=".pdf" i]::before、a[href$=".zip" i]::before - ❌ 错误：
a[href$=".pdf"i]（少空格）、a[href$=".PDF" i]（多余大写）、a[href$=".pdf" I]（I大写无效）
带查询参数（file.pdf?ver=2）或锚点（doc.pdf#page=3）仍能命中，只要 .pdf 紧挨着 ? 或 # 或结尾。
图标对齐总出问题？关键是 display 和 vertical-align
::before 默认是 inline 元素，文字换行、缩放、不同字体下极易错位：
立即学习“前端免费学习笔记（深入）”；
- 必须设
display: inline-block或inline-flex，否则vertical-align无效 -
vertical-align: middle只对inline元素起作用，但前提是父行高稳定（建议显式设line-height） - 避免用
em控制尺寸，width: 16px; height: 16px;更可控 - 如果用
background-image，记得加background-repeat: no-repeat和background-position: right center
比伪元素更稳的方案：用 background-image + padding-right
伪元素依赖文本流，而背景图直接受盒模型控制，位置更确定、重排开销更低：
a[href$=".pdf" i] {
background: url(../icons/pdf.svg) no-repeat right center / 16px;
padding-right: 20px;
}
这个写法绕开了 ::before 的 display 行为、white-space 影响、overflow 裁剪等所有常见陷阱；唯一要注意的是确保 SVG 路径可访问，且 padding-right 足够容纳图标宽度加间距。
最容易被忽略的是：属性选择器只看 DOM 中最终渲染出的 href 字符串值。如果 JS 动态改过链接、服务端做了重写、或 HTML 里 href 值本身带前后空格（如 href=" file.pdf "），匹配就会失败——这种情况下，i 标志也救不了。
