$是css属性选择器的结尾匹配操作符，表示只匹配href属性值严格以“.pdf”结尾的元素，如report.pdf?ver=1或doc.pdf#top（加i标志后），不匹配完全相等或子串包含的情况。
什么是 [href$=".pdf"] 中的 $？
$ 是 CSS 属性选择器里的“结尾匹配”操作符，它只关心属性值是否以指定字符串**结尾**，不看前面是什么、有没有查询参数或锚点。比如 https://a.com/report.pdf?ver=1、/docs/manual.PDF#top（大小写暂不考虑）都算匹配——只要最后是 .pdf 就行。
常见误写：[href=".pdf"]（完全相等，几乎不可能命中）、[href*=".pdf"]（包含即可，会误中 backup.pdf.bak 或 index.php?file=pdf）。
为什么加 i 标志才真正可用？
真实世界里文件后缀大小写混乱是常态：.PDF、.Pdf、.pDf 都可能出现。不加 i，[href$=".pdf"] 只匹配小写结尾，漏掉一大半链接。
正确写法必须满足三点：
-
a[href$=".pdf" i]::after✅ ——i紧贴引号内值之后、右括号之前，且中间有空格 -
a[href$=".PDF" i]❌ —— 大写后缀毫无意义，i作用对象是字符串内容，不是写法 - 浏览器支持没问题：Chrome 55+、Firefox 49+、Safari 10.1+ 全已支持，无需 polyfill
::after 图标不显示？多半是这三件事没做
::after 默认创建一个空的 inline 盒子，content: "" 不等于“显示图标”，它只是占位。必须显式赋予尺寸和内容来源：
- 用字体图标：至少写
content: "\f1c1"; font-family: "Font Awesome 5 Free"; font-weight: 900; - 用 SVG 背景图：要设
display: inline-block; width: 16px; height: 16px; background: url(pdf-icon.svg) no-repeat center / contain; - 别忘了留间距：
margin-left: 4px，否则图标紧贴文字边缘，视觉拥挤
另外，如果父级 a 设了 overflow: hidden 或 text-overflow: ellipsis，::after 会被直接裁掉——伪元素不是绝对定位，它受文本流和盒模型双重约束。
比 ::after 更稳的方案：用 background-image
伪元素依赖行内布局，容易被换行、对齐、缩放搞乱；而背景图直接受盒模型控制，位置更确定、重排开销更低。
推荐写法：
a[href$=".pdf" i] {
background: url(../icons/pdf.svg) no-repeat right center / 16px;
padding-right: 20px;
}
注意两点：
-
padding-right必须大于图标宽度（比如 16px 宽图标配 20px 内边距），否则图标会被文字遮盖 - 路径必须相对于 CSS 文件位置，不是 HTML 文件——跨目录引用时容易错，建议统一用相对路径从 CSS 所在目录出发
真正容易被忽略的是：所有这些匹配都依赖 href 属性真实包含后缀。如果后端用 JS 跳转、或链接指向网关代理路径（如 /api/download?id=123），[href$=".pdf"] 就完全失效——这时候得靠 class 或 data 属性配合，CSS 本身无能为力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
