负z-index on :after 伪元素破坏 CSS :hover 过渡动画

Question

我试图制作一个带有悬停的动画侧边栏，当鼠标移到侧边栏列表项上时，一个彩色框从侧面滑入。为此，我使用 :after 伪元素作为滑动框，但它覆盖了列表项的文本。为了解决这个问题，我将 :after 伪元素的 z-index 值设置为 -1。一旦我进行了更改，过渡就中断了，它们毫无问题地缓入，但是一旦鼠标离开该区域，彩色框就会立即跳回而没有退出过渡。唯一有效的方法是将鼠标保持在其父级内。

这是html

<nav id="sidebar">
    <div class="list-group-flush" id="list-tab" role="tablist">
        <a class="list-group-item list-group-item-action sidebar-item active" href="/home">
            <div class="sidebar-item-content">
                <i class="fas fa-home sidebar-item-icon"></i>
                <span class="sidebar-item-text">Home</span>
            </div>
        </a>
        <a class="list-group-item list-group-item-action sidebar-item" href="/trending">
            <div class="sidebar-item-content">
                <i class="fas fa-trophy sidebar-item-icon"></i>
                <span class="sidebar-item-text">Trending</span>
            </div>
        </a>
        <a class="list-group-item list-group-item-action sidebar-item" href="/create_challenge">
            <div class="sidebar-item-content">
                <i class="fas fa-plus-circle sidebar-item-icon"></i>
                <span class="sidebar-item-text">Create Challenge</span>
            </div>
        </a>
        <a class="list-group-item list-group-item-action sidebar-item" href="/profile">
            <div class="sidebar-item-content">
                <i class="fas fa-user-circle sidebar-item-icon"></i>
                <span class="sidebar-item-text">Profile</span>
            </div>
        </a>
    </div>
</nav>

这里是 SCSS

#sidebar {
height: 100vh;
width: $left-bar-width;
padding-top: spacer(3);
position: fixed;
box-shadow: 0 0 $shadow-spread 0 $shadow-color;
z-index: 1;
clip-path: polygon(0% 0%, add($left-bar-width,$shadow-spread) 0%, add($left-bar-width,$shadow-spread) 

100%, 0% 100%);
}

.sidebar-item-content{
    padding: $sidebar-item-content-padding;
    &:before{
        content: '';
        position: absolute;
        bottom: $sidebar-item-padding-y;
        right: $sidebar-item-padding-x;
        transition: width 0.4s ease-out;
        width: 0%;
        height: subtract(100%,2*$sidebar-item-padding-y);
        border-radius: $sidebar-item-content-roundness;
        background-color: $sidebar-item-content-color;
        z-index: -1;
    }
    &:hover{
        &:before{
            width: subtract(100%,2*$sidebar-item-padding-x);
        }
    }
}

.sidebar-item{
    padding: 
        $sidebar-item-padding-y 
        $sidebar-item-padding-x 
        $sidebar-item-padding-y 
        $sidebar-item-padding-x;
    &.list-group-item{
        border: none;
    }
    &.list-group-item:hover,:focus{
        background-color: initial;
        color: initial;
    }
    &.active{
        &.list-group-item{
            z-index: initial;
            background-color: initial;
            color: initial;
        }
        .sidebar-item-content{
            &:before{
                width: $sidebar-item-active-width;
            }
            .sidebar-item-icon{
                fill: $sidebar-item-content-color;
            }
            .sidebar-item-text{
                color: $sidebar-item-content-color;
                font-weight: bold;
            }
        }
    }
}

提前感谢您的帮助，我承认我完全被这个难住了。

Answer 1

已修复，父元素的 z-index 必须为 2，基本上，父元素的 z-index - 1 必须大于 0，而以前不是这样。