选择链接后不显示动画下划线

Question

我正在使用 Bootstrap 和 SCSS 来自定义我的 CSS 文件。我有一个像这样的nav-link：

.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);
        }
    }
}

将鼠标悬停在项目上时，线条会按预期进行动画处理。但是，当该项目处于活动状态时，该行会消失。

只要该项目处于活动状态，我如何保持该行显示？

Answer 1

因为你想让你的活动状态与你的悬停状态相同，你需要在你的 SCSS 中添加 :active 伪类和你的 :hover 伪类。这将确保当用户单击链接（即链接处于活动状态）时，样式保持不变。 More information about active state on MDN。

我创建了a codepen with different styles for hover and active 来展示交互的发生。如果 :hover 和 :active 具有相同的样式，那么您将看不到这两种状态之间的区别。

&:hover,
&:active {
    transition: all 0.4s ease;
    
    &:before {
        visibility: visible;
        transform: scaleX(1);
    }
}