子组合子和 ::after 伪元素

Question

嗯，这应该很简单。我有以下 CSS sn-p：

.nav-item > .nav-link:not(.active)::after {
  content: "test";
  display: block;
  width: 0;
  border-bottom: solid 2px #019fb6;
  transition: width .3s;
}

但是，我想做这样的事情：

.nav-item::after > .nav-link:not(.active) {
  content: "test";
  display: block;
  width: 0;
  border-bottom: solid 2px #019fb6;
  transition: width .3s;
}

最后：

.nav-item:hover::after > .nav-link:not(.active) {
  width: 100%;
}

我正在尝试创建仅适用于没有“活动”类的导航项的悬停效果。但是，那是行不通的。我做错了什么？

HTML：

<li class="nav-item"><a class="nav-link text-left" href="#">Second Item</a></li>
<li class="nav-item"><a class="nav-link text-left active" href="#">FirstItem</a></li>

提前致谢。

Answer 1

主要问题是，在您发帖时，CSS 不允许您向上。您似乎正在尝试检测嵌套 <a> 级别的活动类，并将某些内容应用于 <a> 的父元素的伪内容。相反，将active 类移至父级(li)。然后你可以控制伪内容。请注意，我将overflow: hidden 添加到未悬停状态，因此content 不可见。此外，我在过渡中添加了opacity，使其看起来更平滑。

.nav-item:not(.active)::after {
  content: "test";
  display: block;
  width: 0;
  opacity: 0;
  border-bottom: solid 2px #019fb6;
  transition: width 0.3s, opacity 0.3s;
  overflow: hidden;
}

.nav-item:not(.active):hover::after {
  width: 100%;
  opacity: 1;
}

<ul>
  <li class="nav-item active"> <!-- active moved here -->
    <a class="nav-link text-left" href="#">FirstItem</a></li>
  <li class="nav-item">
    <a class="nav-link text-left" href="#">Second Item (active)</a></li>
</ul>