Apply hover effect to element with the condition of a child element must have specific class?-CodePudding

I'm trying to make pseudo element on list appear when hovering over it, with the condition that a child <a> has an active class.

So I wrote this:

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

I tried .li:hover::after alone and it works, but when writing both they don't work. I have been searching for hours.

This is the whole HTML code (it's in React):

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

CodePudding user response：

You need to target the <li>s that contain a link with the active class.

Like this:

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