如何在子元素含active类时为li元素添加hover伪元素效果？

问题场景 #

想要实现：鼠标悬停在<li>元素上，且其内部的Link组件（渲染为<a>标签）带有active类时，显示该<li>的::after伪元素。

原CSS选择器：

.sidebar__content-link.active li:hover::after {
  display: block;
  content: attr(data-after);
}

单独使用li:hover::after时有效，但组合条件后失效。对应React渲染的HTML结构：

<li data-after={element}>
  <Link
    href={`/${element}`}
    className={`sidebar__content-link ${isSidebarOpen ? 'active' : ''}`}
  >
    {element}
  </Link>
</li>

问题原因 #

你写的CSS选择器层级顺序完全搞反了。.sidebar__content-link.active是<li>的子元素，而CSS选择器从左到右表示的是后代从属关系，原选择器会去寻找.sidebar__content-link.active内部的<li>，但实际结构是<li>包含.sidebar__content-link.active，所以根本匹配不到目标元素。

正确写法 #

方案1：使用:has()选择器（现代浏览器支持）

直接通过父元素<li>检查内部是否存在带active类的子元素，同时结合悬停状态：

li:hover:has(.sidebar__content-link.active)::after {
  display: block;
  content: attr(data-after);
}

方案2：同步父元素的active类（兼容旧浏览器）

如果需要兼容不支持:has()的浏览器（如旧版Firefox），可以在React中给<li>也同步加上active类，简化选择器：

<li data-after={element} className={isSidebarOpen ? 'active' : ''}>
  <Link
    href={`/${element}`}
    className={`sidebar__content-link ${isSidebarOpen ? 'active' : ''}`}
  >
    {element}
  </Link>
</li>

对应的CSS选择器：

li.active:hover::after {
  display: block;
  content: attr(data-after);
}

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