图标 hover 变色需设 ::before 的 color 为 currentColor，并确保父元素 hover 时 color 改变；currentColor 动态继承父级文字颜色，SVG 则用 fill="currentColor" 实现同步变色。
列表项 hover 时，如果图标是用 ::before 伪元素添加的（比如 Font Awesome、iconfont 或纯 CSS 绘制的图标），默认它不会自动跟随文字颜色变化。要让图标和文字一起变色，关键在于：**把图标颜色设为 currentColor，并确保 hover 时父元素的 color 发生改变**。
✅ 原理很简单：currentColor 就是当前文字颜色
currentColor 是一个 CSS 关键字，它的值始终等于元素的 color 属性值。所以只要给 ::before 的 color 或 background-color（视图标实现方式而定）设为 currentColor，它就会自动响应父元素 color 的变化。
✅ 正确写法示例（文字 + 图标同步变色）
li {
color: #333;
position: relative;
}
li::before {
content: "→"; /* 或 \f054 等 iconfont 字符 */
color: currentColor; /* ? 核心！让图标颜色跟随文字 */
margin-right: 8px;
font-size: 12px;
}
li:hover {
color: #007bff; /* hover 时只改 color，图标自动同步 */
}⚠️ 常见踩坑点
- 没给
::before设置color: currentColor，而是写了死颜色（如color: #666），那就不会变 - 图标用
background-image或 SVG 背景图实现时，currentColor不起作用，得改用mask+background-color或内联 SVG 配合fill: currentColor - 父元素（如
li）本身没设置color，或被其他规则覆盖，导致currentColor没有基准值 - 用了
display: inline-block等导致::before脱离文本流，但一般不影响currentColor继承
? 进阶：用 inline SVG 实现更可控的图标变色
如果需要兼容性更强或更灵活（比如多色图标），可直接在 HTML 中写 SVG，并设 fill="currentColor"：
<li>
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
<path d="M10.5 8l-3 3v-6z"/>
</svg>
我的菜单项
</li>再配合 li:hover { color: #dc3545; }，SVG 图标会自动跟着变红。
立即学习“前端免费学习笔记（深入）”；
基本上就这些。核心就一条：用 currentColor 作为图标颜色的桥梁，hover 只动父级 color，其余交给继承。
