如何在悬停时为文本上的下划线设置动画并保持鼠标移出该行

Question

I've seen a lot of question and tutorials on how to animate a line, but they don't seem to fix my issue. I have a text with an already underline, so I want the user to hover under on the div that contains the text and have the line animate left to right but keep the line afterwards.

This is the code that I have at the moment but its very glitch and the border bottom and :after dont work well together because they are at different height

.cta-text{
    color: #2980FF;
    border-bottom: 3px solid #2980FF;
    transition: width .2s;
    
    &:hover{
        border-bottom: none;
    }

    &::after {
        content: '';
        width: 0;
        height: 3px;
        display: block;
        background: #2980FF;
    }

    &:hover::after {
        width: 100%;
        margin-top: -2px;
        transition: width .3s;
    }
}

Here's a codepen example https://codepen.io/godhandkiller/pen/jOrVjdq

Answer 1

Use @keyframes to change/pause animation.

 @keyframes hover { 0% { // normal styles } 100% { // hover styles } } .class { animation-name: hover; animation-duration: 1ms; animation-fill-mode: backwards; animation-play-state: paused; } .class:active, .class:focus, .class:hover { //hover style you define }

Use this link to see an example.