a[href$=".pdf" i]::after 是唯一靠谱写法，加 i 标志解决大小写匹配问题，需注意空格位置、引号格式、content 必须有值，且 display 和 vertical-align 配合才能准确定位图标。
![如何利用css给特定文件后缀链接加图标_通过[href$=\'.pdf\']:after](https://img.php.cn/upload/article/000/969/633/177959649623560.jpeg?x-oss-process=image/resize,p_40)
直接用 a[href$=".pdf"]::after 加图标最简单，但不加 i 标志或写错引号，90% 的 PDF 链接会漏掉。
为什么 a[href$=".pdf"]::after 经常不生效
根本原因不是选择器写法错，而是匹配逻辑被大小写和边界细节卡住：
-
[href$=".pdf"]默认区分大小写，.PDF、.Pdf全部不命中 - 漏掉点号写成
[href$="pdf"]，会误中myappdf这类字符串 - 用了中文引号
“.pdf”或前后空格[href$= ".pdf"]，整条 CSS 规则静默失效 -
::after必须配content，但只写content: ""不会显示任何东西，得填具体值
a[href$=".pdf" i]::after 是唯一靠谱写法
加 i 标志是纯 CSS 下覆盖大小写的唯一手段，且必须紧跟在引号后、括号前：
- ✅ 正确：
a[href$=".pdf" i]::after、a[href$=".zip" i]::after - ❌ 错误：
a[href$=".pdf"i]（少空格）、a[href$=".PDF" i]（多余大写）、a[href$=".pdf" I]（I 大写无效） - 带查询参数的链接如
report.pdf?ver=2或锚点doc.pdf#page=3仍能命中，只要.pdf紧挨着?或#或结尾 - 如果要用图片图标，
content: url(../icons/pdf.svg)比 PNG 更稳；若用 Unicode，content: "?"要注意字体支持
图标对齐总出问题？关键在 display 和 vertical-align
::after 默认是 inline 元素，文字换行、缩放、不同字体下极易错位：
- 必须设
display: inline-block或inline-flex，否则vertical-align无效 -
vertical-align: middle只对 inline 元素起作用，但前提是父a行高稳定（建议显式设line-height） - 避免用
em控制图标尺寸，font-size: 16px或width: 16px; height: 16px更可控 - 如果用 background-image，记得加
background-repeat: no-repeat和background-position: right center
比 ::after 更稳的替代方案：用 background-image + padding-right
伪元素依赖内容渲染，而背景图直接受 CSS 盒模型控制，尤其适合图标位置强一致场景：
- 写法：
a[href$=".pdf" i] { background: url(../icons/pdf.svg) no-repeat right center / 16px; padding-right: 20px; } - 优势：不依赖
content值，不触发伪元素重排，高 DPI 下缩放更准 - 注意：
background-position: right center中的right是相对于 content box，不是 padding box，所以需预留足够padding-right - SVG 推荐用 data URL 内嵌，彻底避开路径和跨域问题：
url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16'%3E%3Cpath d='M...'/%3E%3C/svg%3E")
真正麻烦的从来不是写一行选择器，而是忘了 i 标志、用了中文符号、或者以为 ::after 能自动垂直居中——这些细节一错，整页 PDF 图标就消失一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
