::before 的 content 值必须用 url() 指向可访问图标资源，推荐绝对路径如 url(/assets/external.svg)；需设 display: inline-block、宽高（如 1em）和 vertical-align 对齐文本。
链接旁加外部图标时，::before 的 content 值怎么写才生效
必须用 url() 指向一个可访问的图标资源，不能直接写图标名或 Unicode（除非是字体图标且已加载对应字体）。常见错误是把 SVG 路径当字符串塞进 content，或者用了相对路径但 CSS 文件位置导致路径解析失败。
-
content: url(./icon-external.svg);—— 相对路径需以 CSS 文件为基准，不是 HTML 页面 -
content: url(/assets/external.svg);—— 推荐绝对路径，避免定位混乱 - 不要写
content: "↗";除非你确定该 Unicode 字符在所有设备上渲染一致（实际中常被替换成系统默认符号或方块） - 如果用 Data URL，注意长度限制和编码：
content: url("data:image/svg+xml,%3Csvghttps://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c%3E");
为什么加了 ::before 图标不显示，还占位错乱
两个最常见原因：元素没设 display: inline-block 或类似行为，以及没给尺寸控制。::before 默认是 display: inline，SVG 图标若无宽高、无 vertical-align，就会和文字基线对不齐，甚至被裁掉。
- 必须显式设置
display: inline-block;或display: flex; - 加上
width和height（哪怕只是1em），否则多数 SVG 不会自动缩放 - 加
vertical-align: middle;或top;对齐文本，不然图标常挂在文字下半截 - 记得设
margin-right: 0.25em;留白，否则图标紧贴文字很难读
a[href^="http"]::before 这类属性选择器为啥漏掉部分外链
因为协议不统一：href="https://example.com" 匹配，但 href="//example.com"（协议相对）或 href="HTTP://"（大写）就不匹配。浏览器对协议大小写不敏感，但 CSS 属性选择器是严格字符串匹配。
- 用
a[href*="://"]::before更鲁棒，能覆盖http://、https://、ftp://甚至// - 如果只要区分站内/站外，更稳妥的是加 class：
@#@#@#@#@#@#@#@#@#@0，再写a.external::before - 避免用
href^="http"同时又忽略mailto:、tel:等伪协议——它们也以http开头？不，但容易误判，不如白名单思维
图标 SVG 在高 DPI 屏幕模糊，怎么保持清晰
SVG 本身是矢量，模糊往往是因为被当成位图拉伸了——根源是没关掉浏览器的“图像平滑”或没设对尺寸单位。CSS 中用像素值硬写宽高（如 width: 16px;）会让 SVG 渲染器降采样。
- 优先用
em或rem：width: 1em; height: 1em;，让图标随文本缩放且保持矢量精度 - 加
image-rendering: -webkit-optimize-contrast;和image-rendering: crisp-edges;抑制插值模糊（尤其对小尺寸 SVG） - 确保 SVG 文件自身没有
width/height属性带固定像素值，应只留viewBox - 不用
background-image替代::before—— 虽然也能做，但语义弱、无法继承颜色、响应式更难控
事情说清了就结束。真正麻烦的不是加图标，而是让图标在各种链接形态（换行、多行、按钮化、无障碍读取）里都稳得住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
