图标 hover 变色需设 ::before 的 color 为 currentColor，并确保父元素 hover 时 color 改变；currentColor 动态继承父级文字颜色，SVG 则用 fill="currentColor" 实现同步变色。
列表项 hover 时，如果图标是用 ::before 伪元素添加的（比如 Font Awesome、iconfont 或纯 CSS 绘制的图标），默认它不会自动跟随文字颜色变化。要让图标和文字一起变色，关键在于：**把图标颜色设为 currentColor，并确保 hover 时父元素的 color 发生改变**。
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 继承如果需要兼容性更强或更灵活（比如多色图标），可直接在 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，其余交给继承。
以上就是css列表项hover时前图标一起变色怎么办_用::before伪元素同步变更图标颜色的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
318
收藏
