1. 基础：理解 ::before 伪元素及其在装饰中的角色
1.1 什么是 ::before 及其工作原理
核心概念：::before 是一个伪元素，可以在目标元素的内容前插入一个内容。该伪元素需要通过content属性来产生可见内容，且通过 display、margin 等属性进行排布。
在实际场景中，常用来放置“装饰性”图标，而不需要修改 DOM 结构，保持 HTML 的语义简洁。
1.2 如何在样式中启用图标的基本代码
要在目标元素前插入图标，先为伪元素指定 content，再通过 display、width、height 来控制尺寸。
/* 基础示例：使用文本图标 */
.button::before {content: "🔔";display: inline-block;width: auto;height: 1em;font-size: 1em;color: #888;margin-right: .5em;
}
2. 字体图标方案：如何精准控制颜色和大小
2.1 使用字体图标的优点与准备
使用字体图标的优点在于 颜色和大小 的控制完全通过 CSS 进行，且可以保持高分辨率；为了实现可扩展性，选用常见的图标字体库并在页面加载时就绪。
通过将图标字体应用到伪元素，可以实现统一的样式风格，并且便于在不同主题间切换颜色。
2.2 示例：Font Awesome 或其他图标字体
在 HTML 中只要将图标作为伪元素内容，且为伪元素指定正确的 font-family 与 font-weight，就可以实现清晰的矢量图标。
/* 使用 Font Awesome 的示例（前提：字体库已加载） */
.icon-btn::before {content: "\\f0f3"; /* FontAwesome 图标编码 */font-family: "Font Awesome 5 Free";font-weight: 900;font-size: 14px;color: #1e90ff;margin-right: 6px;
}
3. SVG 图标与数据URI：高保真且灵活的色彩控制
3.1 使用背景图像实现图标装饰
通过给 ::before 设置 background-image，可以直接使用图标而不依赖字体，带来更高的渲染一致性；同时控制 size、repeat 与 position 以实现精准显示。
/* 使用 data URL 的 SVG 图标作为伪元素背景 */
.box::before {content: "";display: inline-block;width: 14px;height: 14px;background-image: url("data:image/svg+xml;utf8,");background-size: contain;background-repeat: no-repeat;vertical-align: middle;
}
3.2 颜色与大小的关键点
通过 width、height 和 background-color 的组合，可以实现对图标大小和颜色的精确控制；如果使用 SVG，SVG 的 fill 属性也能直接改变颜色。
4. 无障碍性、兼容性与最佳实践
4.1 可访问性要点
使用 ::before 插入的内容主要是装饰性信息，屏幕阅读器应能绕过它，因此应避免用它传达关键信息；如需要传递文本信息，给元素提供可访问的文本或使用 aria-label/aria-hidden 设置。
4.2 跨浏览器兼容性与回退策略
现代浏览器对 ::before 的支持很好，但 旧版浏览器可能需要回退方案，如同时在 HTML 中留文本或使用 ::after 作为辅助图标。
/* 回退方案示例：HTML 文本 + ARIA 提示 */
