能，但需用属性选择器匹配href后缀并手动配置图标字体或svg；浏览器不自动识别文件类型，伪元素不会“猜”类型，须用[href$=".pdf"]等精确匹配，注意查询参数导致$=失效，content中只能写字符串、unicode或url()，不能写类名，图标纯装饰需加aria-label。
能，但必须用属性选择器匹配 href 后缀，且图标字体或 SVG 必须手动配置——浏览器不自动识别文件类型，也不内置对应图标。
用 [href$=".pdf"] 这类属性选择器匹配后缀
伪元素本身不会“猜”文件类型，得靠 CSS 属性选择器抓取 URL 结尾。常见写法：
-
[href$=".pdf"]匹配以 .pdf 结尾的链接（注意不是.pdf?或.pdf#） -
[href*="docs.google.com"]可捕获 Google Docs 链接，但需配合content手动设图标 - 避免
[href~="pdf"]：它匹配空格分隔的单词，对 URL 完全无效 - 若链接带查询参数（如
report.pdf?version=2），$=会失效，得改用*=或 JS 补充
content 里只能写字符串、Unicode 或 url()，不能写类名
很多人复制 Font Awesome 的 HTML 写法（比如 <i class="fa-solid fa-file-pdf"></i>），然后往 content 里塞 "fa-file-pdf"——这只会显示那几个字母，不会出图标。
- 正确做法：查 Font Awesome CSS 文件，找到类似
.fa-file-pdf::before { content: "\f1c1"; }，提取"\f1c1"塞进自己的规则 - 用本地图标字体时，
font-family必须和@font-face中声明的完全一致（包括空格、大小写、版本号） - 用 SVG 图标？优先走
background-image而非content: url(...)，后者尺寸难控，且无法用color改色
对齐文字时别硬调 top，vertical-align: middle 配 display: inline-block 更稳
默认 ::before 是 inline 元素，按基线对齐，PDF 图标常显得“飘高”，尤其和中文混排时。
- 加
display: inline-block后，vertical-align: middle才真正生效 - 避免
position: absolute：它需要父级设position: relative，而链接（a）通常没这个设置，容易定位错乱 - 如果图标太小，调
font-size（字体图标）或width/height（SVG 背景图），别碰line-height
最易被忽略的是：所有这类图标都是纯装饰，屏幕阅读器完全感知不到。如果链接语义关键（比如“下载用户协议（PDF）”），必须用 aria-label 显式说明类型，不能只靠图标传达信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
