Animated underline on link hover mixin

_animated_underline.scss

/**
Adds an animated underline hover effect
a {
  @include animated-underline(#000000);
  // your styles here
}
*/
@mixin animated-underline($color: $color__link, $bottom: 3px, $height: 1px) {
    position: relative;
    display: inline-block;

    &:after {
        content: "";
        position: absolute;
        bottom: $bottom;
        left: 0;
        width: 100%;
        height: $height;
        background-color: $color;
        visibility: hidden;
        transform: scaleX(0);
        transition: all 0.3s ease-in-out;
    }

    &:hover {
        &:after {
            visibility: visible;
            transform: scaleX(1);
        }
    }
}