CODEWITHSUNDEEP
htmlcsssass
Sackadelic
Sackadelic

Reputation: 1019

How to animate pseudoelement on after hover?

I'm trying to animate a pseudoelement when a user leaves it's :hover state. Right now, I just have a div with 3 li in it, and I'm animating a pseudoelement on the bottom border:

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

I can get the pseudoelement to animate on the hover, but I'm struggling getting a smooth transition back to it's normal state after the cursor leaves the hover area. I tried adding a transition property to the parent element, but that doesn't seem to work. Any ideas?

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%
    }
}

Upvotes: 0

Views: 58

Answers (1)

pawel
pawel

Reputation: 36965

You don't really need the animation here, but, more importantly the pseudoelement should be on li at all times, with the normal (hidden) state as the default, and the hover state with the values that should change on hover:

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

Upvotes: 3

Related Questions