子组合器和 ::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%;
}

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

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

主要问题是，在您 post 时，CSS 不允许您 up。您似乎正试图在嵌套的 <a> 级别检测活动的 class 并将某些内容应用于 <a> 的父元素的伪内容。相反，将 active class 移动到父 (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>

子组合器和 ::after 伪元素

Child combinator and ::after pseudo-element

html

css

css-selectors

bootstrap-4