用a[href$=".pdf"]::after匹配pdf链接，通过content配合background或字体图标添加pdf图标，并注意display、尺寸和margin设置以确保正常显示。
怎样用 ::after 在文字后加 PDF 图标（不改 HTML）
直接用 ::after 无法识别文件类型，必须靠属性选择器定位带 PDF 链接的元素。核心是匹配 href 属性值以 .pdf 结尾的 <a></a> 标签，再用伪元素插入图标。
a[href$=".pdf"]::after 的写法和限制
这是最常用也最稳妥的匹配方式，$= 表示“结尾匹配”，能准确捕获 xxx.pdf、xxx.pdf?ver=1 这类链接（但注意：不匹配 xxx.PDF 或 xxx.pdf#page=2 —— 大小写和锚点会影响匹配）。
实操建议：
- 务必加引号：
a[href$=".pdf"]::after中的".pdf"不能省略引号，否则部分浏览器会解析失败 - 避免写成
a[href*="pdf"]：它会误匹配epub、api等含pdf字串的链接 - 如果页面有大小写混用的 PDF 链接，得补一条：
a[href$=".PDF"]::after
图标显示的关键 CSS 设置
只写 content: "" 不会显示任何东西；要让图标可见，至少得指定尺寸、背景图或 Unicode 字符，并处理行高/对齐问题。
常见做法（选一种即可）：
- 用背景图：
content: "";+display: inline-block;+width: 16px; height: 16px;+background: url(pdf-icon.svg) no-repeat center / contain; - 用字体图标（如 Font Awesome）：
content: "\f1c1"; font-family: "Font Awesome 5 Free"; font-weight: 900; - 用纯色方块模拟（调试用）：
content: ""; display: inline-block; width: 12px; height: 12px; background: #e04a3f;
别漏掉 margin-left: 4px;，否则图标会紧贴文字，视觉拥挤。
为什么 PDF 图标没显示？几个高频原因
最常见的不是语法错，而是渲染上下文问题：
-
::after默认是display: inline，若父元素设了overflow: hidden或text-overflow: ellipsis，图标会被裁掉 - 如果链接本身用了
display: block或flex，::after可能换行或错位，需显式设display: inline-block - 使用 SVG 背景图时，路径 404 或 MIME 类型不对（Nginx/Apache 需配
svg的Content-Type）会导致空白 - 在
<button></button>或<input>上用::after无效 —— 它们不支持伪元素
真要兼容锚点链接（如 doc.pdf#section1），得用 JS 补一层 class，CSS 本身拿不到 URL 解析后的扩展名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
