CODEWITHSUNDEEP
htmlcssbootstrap-4css-selectors
gusta
gusta

Reputation: 69

Child combinator and ::after pseudo-element

Well, that should be quite simple. I have the following CSS snippet:

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

However, I'd like to do something like that:

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

And finally:

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

I'm trying to create a hover effect that only works on nav-items that doesn't have the "active" class. But, that ins't working. What am I doing wrong?

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>

Thanks in advance.

Upvotes: 0

Views: 236

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19109

The main issue is that, at the time of your post, CSS doesn't allow you to go up. It seems you're trying to detect an active class at the nested <a> level and apply something to the pseudo content of <a>'s parent element. Instead, move the active class to the parent (li) level. Then you can control the pseudo content. Note that I added overflow: hidden to the un-hovered state, so that the content was not visible. In addition, I added opacity to the transition to make it a little smoother looking.

.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>

Upvotes: 1

Related Questions