CSS transition with different mouse leave - css

Question

I'm trying to achieve similar behaviour like as shown in this gif.
I tried to add a class after mouseleave via jQuery, I also tried the background as a linear gradient, unfortunately I can't figure out how to make the effect after moving the mouse. Thanks a lot for any advice.
HTML:
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="./eshop.html">E-shop</a>
</li>
</ul>
SCSS:
.nav-item {
display: flex;
flex-direction: row;
transform: skewX(-25deg);
border-right: 1px solid #9e8451;
margin: 0 0.5rem;
.nav-link {
font-weight: 500;
color: #c09f62 !important;
font-size: 1.15rem;
text-transform: uppercase;
transform: skewX(25deg);
padding: 1.25rem 1.85rem !important;
transition: 0s text-shadow;
}
&::after {
content: "";
width: 100%;
background: #312612;
transition: all 1s linear;
position: absolute;
right: -200%;
top: 0;
height: 100%;
display: block;
z-index: -1;
}
&.active,
&:hover {
font-weight: bold;
&::after {
right: 0;
}
.nav-link {
color: #f8d696 !important;
text-shadow: 0 0 15px #f2c87b;
transition-delay: 1.15s;
font-weight: bold;
}
}
}

Answer 1

Set your .nav-item z-index less than your ::after pseudo element and increase the z-index on .nav-item on hover or active.
Here it is how you can achieve this.
.nav-item {
display: flex;
flex-direction: row;
transform: skewX(-25deg);
border-right: 1px solid #9e8451;
margin: 0 0.5rem;
.nav-link {
font-weight: 500;
color: #c09f62 !important;
font-size: 1.15rem;
text-transform: uppercase;
transform: skewX(25deg);
padding: 1.25rem 1.85rem !important;
transition: 0s text-shadow;
z-index:0;
}
&::after {
content: "";
width: 100%;
background: #312612;
opacity:.5;
transition: all 1s linear;
position: absolute;
right: -200%;
top: 0;
height: 100%;
display: block;
z-index: 1;
}
&.active,
&:hover {
font-weight: bold;
&::after {
right: 0;
}
.nav-link {
color: #f8d696 !important;
text-shadow: 0 0 15px #f2c87b;
transition-delay: 1.15s;
font-weight: bold;
z-index:2;
}
}
}