必须设置 content（不能为空字符串或 none）；父元素不能是 display: none 或 visibility: hidden；伪元素自身不能被 display: none 覆盖；若用字体图标需确保字体加载完成且 font-family 正确；推荐写法：content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900。
用 ::before 添加装饰性图标需要哪些必要条件
必须给元素设置 content，否则 ::before 不渲染；同时需确保父元素不是 display: none 或 visibility: hidden，且伪元素本身不能被 display: none 覆盖。
-
content不能为空字符串（""可以，但none不行） - 若用字体图标（如 Font Awesome），需确保字体已加载，且
font-family正确指向图标字体 - 若用 Unicode 字符（如
\e900），需确认字体支持该码点，且未被浏览器默认字体 fallback 掉 - 常见错误：忘了设
position: relative在父元素上，导致后续用absolute定位图标时错位
用字体图标 + font-family 实现稳定显示
比 base64 图片或 SVG 更轻量，兼容性好，缩放不失真。关键在字体加载时机和 family 名匹配。
- 引入字体 CSS 后，检查开发者工具的
Computed面板，确认font-family生效且无 warning - 推荐写法：
content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;（注意 free 版需指定font-weight） - 避免直接复制网页上看到的字符——它可能是渲染后的结果，实际应查字体文档获取原始 Unicode
- IE11 及更早版本不支持
font-display: swap，建议搭配@font-face的font-display: block或降级为图片
用 background-image 替代 content 显示 SVG 图标
当图标需多色、响应式缩放或避免字体加载失败白屏时，用背景图更可控。
- 必须设
content: ""（哪怕只是空字符串），否则伪元素不创建盒模型，background无处渲染 - 推荐内联 SVG base64：
background: url("data:image/svg+xml,%3Csvg...%3E") no-repeat;，避免额外请求 - 记得配
width/height和background-size: contain，否则 SVG 可能被拉伸或裁剪 - 注意 base64 中的
/、+、=需 URL 编码，可用在线工具生成，别手写
定位与样式隔离的典型陷阱
::before 默认是 inline 盒，容易受父元素 line-height、vertical-align 干扰，造成垂直偏移。
立即学习“前端免费学习笔记（深入）”；
- 加
display: inline-block或display: block是第一步，再配合vertical-align: middle对齐文字 - 若用
position: absolute，父元素务必有position: relative，且注意 z-index 层叠是否被遮挡 - 不要依赖
margin-left控制图标间距——换字体或字号后易错位，改用padding-left在父元素上留白更稳健 - 伪元素无法继承
color到 background 或 content 字符，需显式设置color或fill（SVG 内联时）
