animated-wrapping-underline.scss

// https://nickymeuleman.netlify.app/blog/css-animated-wrapping-underline
// https://codepen.io/jh3y/pen/gOPjBPM

:root {
    --underline-width: 5px;
    --underline-block-width: 2rem;
    --underline-color: hsla(7, 72%, 49%, 0.363);
    --underline-color-hover: transparent;
    --underline-transition-in: 0.75;
    --underline-transition-out: 0.5;
    --bg: hsl(0, 95%, 24%);
}

a {
    text-decoration: none;
    /* Two background images, the first is the moving block, the second the underline */
    background-image: linear-gradient(90deg, var(--bg), var(--bg)),
        linear-gradient(90deg, var(--underline-color), var(--underline-color));
    background-repeat: no-repeat;
    background-size: var(--underline-block-width) var(--underline-width),
        100% var(--underline-width);
    background-position: calc(var(--underline-block-width) * -1) 100%, 0 100%;
    transition: background-position calc(var(--underline-transition-out) * 1s)
            ease,
        background-image calc(var(--underline-transition-out) * 1s) ease;

    &:hover {
        background-image: linear-gradient(90deg, var(--bg), var(--bg)),
            linear-gradient(
                90deg,
                var(--underline-color-hover),
                var(--underline-color-hover)
            );
        background-position: calc(100% + var(--underline-block-width)) 100%,
            0 100%;
        transition: background-position
                calc(var(--underline-transition-in) * 1s) ease,
            background-image calc(var(--underline-transition-in) * 1s) ease;
    }
}