悬停后如何为伪元素设置动画？

Question

当用户离开它的:hover 状态时，我正在尝试为伪元素设置动画。现在，我只有一个包含 3 li 的 div，我正在为底部边框上的伪元素设置动画：

CODEPEN： https://codepen.io/Sackadelic/pen/eYZJNbZ

我可以让伪元素在悬停时进行动画处理，但是在光标离开悬停区域后，我很难平滑过渡到正常状态。我尝试将transition 属性添加到父元素，但这似乎不起作用。有什么想法吗？

HTML

 <div class="container">
     <nav class="nav">
         <li>HOME</li>
         <li>ABOUT</li>
         <li>CONTACT</li>
     </nav>
 </div>

SCSS

$color: #bada55;

body {
    height: 100vh;
    width: 100vw;
    background-color: #222;
    color: #fff;
}

.container {
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav {
    display: flex;


    li {
        list-style: none;
        font-weight: bold;
        font-size: 2rem;
        margin: 20px;
        padding: 10px;
        position: relative;
        transition: 0.2s;

        &:hover {
            color: #bada55;
            transition: 0.2s;


            &:before {
                content: "";
                background-color: #bada55;
                width: 100%;
                height: 3px;
                position: absolute;
                display: block;
                top: 4rem;
                left: 0;
                overflow: hidden;
                animation: slide 0.5s;
                transition: 0.2s;
            }
        }
    }
}

@keyframes slide {
    0% {
        opacity: 0;
        transform: translateX(-20px);
        width: 0%;
    }

    100% {
        opacity: 1;
        transform: translateX(1);
        width: 100%
    }
}

Answer 1

你在这里并不需要animation，但更重要的是，伪元素应始终位于li，默认为正常（隐藏）状态，悬停状态为悬停时应该改变：

.nav {      
    display: flex;

    li {
        list-style: none;
        font-weight: bold;
        font-size: 2rem;
        margin: 20px;
        padding: 10px;
        position: relative;
        transition: 0.2s;
        // the default state - will animato to it after the pointer is out
        &:before {
                content: "";
                background-color: #bada55;
                width: 100%;
                height: 3px;
                position: absolute;
                display: block;
                top: 4rem;
                left: 0;
                overflow: hidden;
                transition: 0.5s;
                opacity: 0;
                width: 0%;
                transform: translateX(-20px);
            }
        
        &:hover {
            color: #bada55;
            transition: 0.2s;
            // the hover state
            &:before {
                opacity: 1;
                width: 100%;
                transform: translateX(0);
            }
        }
    }
}