a[href$=".pdf" i]::after是稳定添加pdf图标的唯一可靠写法，i标志实现大小写不敏感匹配，需严格空格、禁用大写i，并配合display: inline-block和vertical-align: middle确保对齐。
直接用 a[href$=".pdf" i]::after 就能稳定加图标，i 标志是关键——没有它，.PDF、.Pdf 这类链接全会漏掉。
为什么 a[href$=".pdf"] 常常不生效
根本不是选择器写错，而是匹配被细节卡住：
-
[href$=".pdf"]默认区分大小写，report.PDF和doc.Pdf全都不命中 - 漏掉点号写成
[href$="pdf"]，会误中myappdf这类字符串 - 用了中文引号
“.pdf”或前后多空格[href$= ".pdf"]，整条规则静默失效 -
content: ""不会显示任何东西——伪元素创建了，但内容为空，得填值才行
a[href$=".pdf" i]::after 的最小可行写法
加 i 是唯一纯 CSS 覆盖大小写的办法，且空格和大小写必须严格：
- ✅ 正确：
a[href$=".pdf" i]::after - ❌ 错误：
a[href$=".pdf"i]::after（少空格） - ❌ 错误：
a[href$=".PDF" i]::after（大写无意义） - ❌ 错误：
a[href$=".pdf" I]::after（I大写无效）
带查询参数（file.pdf?ver=2）或锚点（doc.pdf#page=3）仍能命中，只要 .pdf 紧挨着 ? 或 # 或结尾。
图标对齐总出问题？关键是 display 和 vertical-align
::after 默认是 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
最易被忽略的是：属性选择器只看 DOM 中最终渲染出的 href 字符串值。如果 JS 动态改过链接、服务端做了重写、或 HTML 里 href 值本身带前后空格（如 href=" file.pdf "），匹配就会失败——这种情况下，i 标志也救不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
