子组合子和 ::after 伪元素

Question

嗯，那应该很简单。 我有以下 CSS 片段：

.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%;
}

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

网址：

<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 不允许您使用up 。 您似乎正在尝试检测嵌套的<a>级别的活动类，并将某些内容应用于<a>父元素的伪内容。 相反，将active类移动到父 ( li ) 级别。 然后就可以控制伪内容了。 请注意，我添加了overflow: hidden到 un-hovered 状态，因此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>