NavLink：CSS animation 上 hover 和活动

Question

I'm trying to style a nav-bar with some CSS to add some animations to the NavLinks. So I'm trying to accomplish that on hover the text will be underlined from right to left and when a NavLink is active I want it to be underlined.

With my solution I get almost the behaviour I want except that when a NavLink is active the hover animation and the active underline don't overlay each other. The two underlines form two separate underlines below the text.

Picture of current NavLink with hover and active

Here is the code:

{navItems.map((item) => (
    <div className="example">
        <NavLink
            key={item.title.toLowerCase()}
            className="hover hover-1"
            activeClassName="active"
            to={item.link}
            exact={item.exact}
        >
            {item.title}
        </NavLink>
    </div>
))}

And here is the CSS:

@import "./../global";

$animate: all 0.2s ease-in-out;
$darkBlue: darkBlue;

.example {
  display: flex;
  flex-flow: row nowrap;
  align-items: bottom;
  margin: 0 0 5px;
  .hover {
    text-align: center;
    margin: 0 auto;
    padding: 0;
    transition: $animate;
    position: relative;
    &:before,
    &:after {
      content: "";
      position: absolute;
      bottom: 0px;
      width: 0px;
      height: 4px;
      margin: 5px 0 0;
      transition: $animate;
      transition-duration: 0.5s;
      opacity: 0;
      background-color: $darkBlue;
    }

    &.hover-1 {
      &:before,
      &:after {
        left: 0;
      }
    }
  }
  &:hover {
    cursor: pointer;
    .hover {
      &:before,
      &:after {
        width: 100%;
        opacity: 1;
      }
    }
  }
  .active {
      border-bottom: 4px solid $darkBlue;
  }
}

I would very much appreciate some help with this issue:)

Answer 1

You can achieve your requirement by apply not in css like below.

.example {
 // remaining properties 

 // EVERYTHING IS SAME BUT JUST ADDED not
.hover:not(.active) {

text-align: center;
margin: 0 auto;
padding: 0;
transition: $animate;
position: relative;
&:before,
&:after {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 0px;
  height: 4px;
  margin: 5px 0 0;
  transition: $animate;
  transition-duration: 0.5s;
  opacity: 0;
  background-color: $darkBlue;
}

&.hover-1 {
  &:before,
  &:after {
    left: 0;
  }
 }
}
 // remaining properties
}