用a[href$=".pdf" i]::before匹配PDF链接并插入图标最省事，需加i标志忽略大小写，设display: inline-block和margin-right确保布局稳定。
怎么用[href$=".pdf"]匹配PDF链接并加图标
直接在CSS里用属性选择器定位文件后缀，再用::before插入图标最省事。关键是后缀匹配要写对，不然连不上。
常见错误是把$=写成=或*=，结果所有链接都中招，或者一个都不生效。PDF链接必须以.pdf结尾（不区分大小写），但CSS属性选择器默认区分大小写，所以得加i标志：
-
a[href$=".pdf" i]::before—— 正确，i让匹配忽略大小写 -
a[href$=".PDF"]—— 错误，漏掉i且没覆盖小写情况 -
a[href*="pdf"]—— 危险，会匹配http://example.com/apidoc这种含pdf子串的URL
图标建议用content: "?"先测试，确认选择器生效后再换字体图标或SVG背景。
为什么::before要设display: inline-block
纯文本图标（如content: "⬇"）默认是inline，没法控制宽高、垂直对齐或加背景；而inline-block能稳住布局，尤其和文字混排时不会错位。
立即学习“前端免费学习笔记（深入）”；
不设的话，图标可能被压扁、换行异常，或者和链接文字基线对不齐。实操中只要加两行就稳了：
a[href$=".zip" i]::before {
content: "?";
display: inline-block;
margin-right: 4px;
}
注意：margin-right比padding更安全——它不侵占链接可点击区域，用户点文字边缘也能触发跳转。
[href^="mailto:"]和[href^="tel:"]怎么加不同图标
这类协议前缀匹配要用^=，不是$=。写反了就完全不生效，而且容易和普通HTTP链接混淆。
多个协议可以合并写，避免重复声明样式：
-
a[href^="mailto:"]::before→content: "✉️" -
a[href^="tel:"]::before→content: "?" - 如果想统一加图标+统一间距，可以写成：
a[href^="mailto:"], a[href^="tel:"]，再设公共样式
别用[href~="mailto"]——那是匹配空格分隔的单词，对href属性完全无效。
图标加载失败或显示方块？检查这三点
Emoji图标在旧系统或终端字体缺失时会变豆腐块，不是CSS写错了。优先级从高到低排查：
- 确认浏览器支持该Emoji（比如
?在Win7默认字体里大概率不显示） - 避免用
font-family强行指定不包含Emoji的字体（如font-family: "Helvetica"） - 真要保底，改用SVG背景图：
background: url("download.svg") no-repeat left center / 1em，同时删掉content
用content插图标看着简单，但跨平台一致性差；真上线项目，协议类图标（mailto/tel）用Emoji还行，文件类（PDF/ZIP）建议上SVG。
