Animated underline not showing once link is selected - css

Question

I'm using Bootstrap and SCSS to customize my CSS file. I have a nav-link like this:
.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);
}
}
}
The line is animated as expected when hovering over the item. However, when the item is active, the line disappears.
How do I keep the line showing as long as the item is active?

Answer 1

As you want to make your active state the same as your hover state you need to add the :active pseudo class alongside your :hover pseudo class in your SCSS. That will ensure that when the user clicks the link (i.e. the link is active) the style remains the same. More information about active state on MDN.
I have created a codepen with different styles for hover and active to show the interaction happening. If :hover and :active have the same styles you would therefore see no difference between the two states.
&:hover,
&:active {
transition: all 0.4s ease;
&:before {
visibility: visible;
transform: scaleX(1);
}
}