能，但必须用属性选择器手动匹配 href 字符串，浏览器不自动识别文件类型；a[href$=".pdf" i]::before 是最稳写法，需注意 i 标志格式、空格、结尾匹配及 dom 渲染值，避免 *= 误匹配、content 填类名、图标对齐与无障碍问题。
能，但必须用属性选择器手动匹配 href 字符串，浏览器不自动识别文件类型或链接意图，所有图标都得你一条条写规则。
a[href$=".pdf" i]::before 是最稳的 PDF 图标写法
这是实际项目里最常用、兼容性最好的写法，关键在 i 标志和结尾匹配逻辑：
-
a[href$=".pdf" i]中的i必须小写、前后有空格，否则无效（a[href$=".pdf"i]或a[href$=".PDF" i]都不生效） -
$=匹配的是 DOM 中最终渲染出的href值，所以report.PDF?ver=1、doc.Pdf#section都能命中 - 如果 HTML 里
href值带前后空格（如href=" file.pdf "），匹配直接失败，i也救不了 - 别用
[href*="pdf"]——它会把https://api.example.com/v2/pdf-export这类 URL 也套上图标
content 里不能塞类名，只能塞字符串、Unicode 或 url()
很多人复制 Font Awesome 的 HTML 写法，往 content 里填 "fa-solid fa-file-pdf"，结果只显示这几个字母：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ✅ 正确做法：用
content: "?"测试选择器是否生效，再换 SVG data URL 或 Unicode 组合 - ✅ 纯 SVG 推荐用
background-image: url("data:image/svg+xml,...")，避免字体加载失败 - ❌ 错误写法：
content: "fa-file-pdf"、content: class="icon-pdf"—— 这些都不会渲染成图标 - 如果用背景图，记得加
background-repeat: no-repeat和background-position: left center
图标总“飘高”？问题出在 display 和 vertical-align
::before 默认是 inline 元素，基线对齐在不同字体、缩放、行高下极不稳定：
- 必须加
display: inline-block，否则vertical-align: middle不起作用 -
vertical-align: middle对齐的是父元素的 middle，不是文字中线；建议同时设line-height: 1.5之类固定值 - 避免用
top: -2px硬调位置——换字体或用户缩放后立刻错位 - 图标尺寸优先用
width: 16px; height: 16px;，比font-size: 1em更可控
所有这类图标都是纯装饰，无障碍必须靠 aria-label
屏幕阅读器完全读不到 ::before 插入的内容，仅靠图标传达“这是 PDF”属于信息缺失：
- 如果链接文本本身没说明类型（比如只写“下载”），必须加
aria-label="下载用户协议（PDF）" - 伪元素图标建议加
aria-hidden="true"，防止读屏软件读出 Unicode 符号（如 “?” 被读成 “文件图标” 或乱码） - JS 动态生成的链接，若 href 被修改过，CSS 属性选择器可能失效——这时得靠 JS 补充 class 或 aria-label
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
