CSS hover时实现::before伪类与文本同时变红的问题求助

问题场景 #

尝试通过CSS实现：当鼠标悬停在列表项上时，带图标的::before伪类和“Permits Required”文本同时变为红色，但当前仅图标变红，文本无变化。

原代码 #

CSS #

.knHeader__menu-list-item:hover::before {
  color: #aa0003 !important;
}

.knHeader__menu-list-item:hover {
  color: #aa0003 !important;
}

HTML #

<li class="knHeader__menu-list-item">
  ::before
  <a href="#permits-required" class="knHeader__menu-link knHeader__menu-link--text">
    <!---->

    Permits Required

    <!---->
  </a>
</li>

解决方案 #

问题核心是文本嵌套在<a>标签内，该标签自身的颜色样式优先级高于父元素的设置。需要在hover状态下明确指定<a>标签的颜色：

.knHeader__menu-list-item:hover::before,
.knHeader__menu-list-item:hover .knHeader__menu-link {
  color: #aa0003 !important;
}

说明 #

• 原代码仅给父列表项设置hover颜色，但<a>标签的默认样式或自定义样式会覆盖这个继承的颜色值，因此必须单独为hover状态下的<a>标签指定颜色。
• 修改后，鼠标悬停在列表项的任意区域（图标或文本）时，伪类图标和链接文本会同步变为目标红色。

内容的提问来源于stack exchange，提问作者rainybird