Utilizing Bootstrap and SCSS to tailor my CSS file, I've implemented a nav-link with the following style:
.sidebar .nav-pills .nav-link:hover,
.sidebar .nav-pills .show > .nav-link {
@extend %underline-link;
background: linear-gradient(120deg, $sidebar-navitem-background-color 65%, $sidebar-navitem-background-color 65%);
}
.sidebar .nav-pills .nav-link.active,
.sidebar .nav-pills .show > .nav-link {
@extend %underline-link;
background: linear-gradient(120deg, darken($sidebar-navitem-background-color, 2) 65%, darken($sidebar-navitem-background-color, 2) 65%);
}
%underline-link {
color: $underline-link-color;
position: relative;
text-decoration: none;
transition: all 0.4s ease;
&:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0px;
left: 0;
background: $underline-link-color;
visibility: hidden;
transform: scaleX(0);
transform-origin: center left;
transition: all 0.3s ease 0s;
}
&:hover {
transition: all 0.4s ease;
&:before {
visibility: visible;
transform: scaleX(1);
}
}
}
While the line animates correctly on hover, it disappears when the item is active.
How can I ensure the line remains visible while the item is active?