伪元素 ::before 必须配合已定位父元素（如 position: relative）才能正确使用 absolute 定位；推荐用 content: url() 引入 SVG 图标并结合 transform 微调，避免兼容性与布局问题。
伪元素 ::before 不能直接定位，必须配合 position: relative
很多人写完 ::before 图标没显示，或者死活对不齐，根本原因是忘了给父元素加定位上下文。CSS 伪元素本身不占文档流，position: absolute 在它身上生效的前提是：它的最近一个「已定位祖先」存在——而这个祖先几乎总是你要装饰的那个元素本身。
常见错误现象：::before 内容完全不见、飘到页面左上角、随滚动错位。
- 父元素必须显式设置
position: relative（或absolute/fixed），哪怕它原本不需要定位 -
::before自身设position: absolute，再用top/right等微调位置 - 如果父元素已有
position: absolute，但它的定位基准不对，也要检查它的父级是否漏了relative - 别依赖
display: inline父元素的行高来“猜”图标位置——它不可靠，尤其在换行或字体缩放时
::before 里用 content 插图标，优先选 url() 而非 Unicode 字符
用 content: "★" 看似简单，但实际项目里容易出问题：字体缺失、编码不一致、字号/基线难对齐、无法配色。真正稳定可控的方式是把小图标做成 SVG 或 PNG，用 url() 引入。
使用场景：按钮左侧装饰图标、表单必填项标记、卡片角标等固定尺寸小图。
立即学习“前端免费学习笔记（深入）”；
-
content: url(./icon-star.svg)—— SVG 可缩放、颜色可由fill控制（需内联 SVG 或用mask） - 如果必须用字体图标（如 Font Awesome），得确保
@font-face已加载，且content值对应正确 Unicode，例如content: "\f005" - 避免用系统字体里的符号（如
"→"），不同 OS 渲染差异大，iOS 和 Windows 下宽度、间距可能完全不同 - 记得设
width/height，否则url()图片默认按原始尺寸渲染，可能撑开布局
伪元素定位图标时，transform 比 top/left 更安全
用 top: -2px 这类像素偏移看似直接，但一旦父元素字体大小变化、行高调整、或遇到 zoom 缩放，图标就容易偏移。而 transform: translateY(-50%) 这类基于自身尺寸的偏移，适应性更强。
性能影响：现代浏览器对 transform 的硬件加速支持更好，频繁动画也更流畅；top/left 触发 layout + paint，开销略高。
- 垂直居中常用：
top: 50%; transform: translateY(-50%) - 水平居中：
left: 50%; transform: translateX(-50%) - 组合偏移（比如右上角）：
top: 8px; right: 8px; transform: translate(0, 0)—— 这里translate不做偏移，只是占位，方便后续 JS 动态改 - 慎用
margin微调：它会影响父元素的盒模型计算，尤其在 flex/grid 容器里行为更难预测
IE11 及以下不支持 content 里的 url()，兼容方案要提前想好
IE11 对 ::before 的 content: url(...) 支持极差，会直接忽略整个伪元素。这不是 bug，是标准实现缺失。如果你的项目还要兼容 IE，就得绕开。
可接受的降级方式不是“不显示图标”，而是“退化为纯文本提示”或“用真实 DOM 元素替代”。
- 最简方案：用
content: "*"或content: "必填"作为 fallback 文本 - 进阶方案：JS 检测
CSS.supports('content', 'url("")')，不支持时动态插入<span class="icon"></span> - 别试图用
@supports (content: url(""))做 CSS 分离——IE11 根本不解析这句，整段规则都会被跳过 - 如果用 Webpack，可配置
svg-url-loader把 SVG 内联成 data URL，但 IE11 对 data URL 长度有限制（约 32KB），超长会失效
真正麻烦的不是怎么写，而是伪元素一旦参与布局计算（比如用 width 影响父容器最小宽），在旧浏览器里表现就更难预料。能不用 ::before 做功能性定位，就尽量别用。
