.link_underline{
    color: black;
    width: fit-content;
    text-decoration:none;
    display: flex;
    position: relative;
    padding: 0.2em 0;
    overflow: hidden;
    justify-self: center;
    font-family: 'Noto';
    font-size: 1vw;
    white-space: nowrap;
}

.link_underline_left{
    color: black;
    width: fit-content;
    text-decoration:none;
    display: block;
    position: relative;
    padding: 0.2em 0;
    overflow: hidden;
    justify-self: start;
    font-family: 'Noto';
    font-size: 1vw;
}

.link_underline::after,
.link_underline_left::after, 
.link_underline_right::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: red;
    opacity: 0;
    transition: opacity 300ms, transform 300ms;
    -webkit-transition: opacity 300ms, transform 300ms;
    -moz-transition: opacity 300ms, transform 300ms;
    -ms-transition: opacity 300ms, transform 300ms;
    -o-transition: opacity 300ms, transform 300ms;
}
.link_underline_left:hover::after,
.link_underline_left:focus::after,
.link_underline_right:hover::after,
.link_underline_right:focus::after,
.link_underline:hover::after,
.link_underline:focus::after {
    opacity: 1;
    transform: translate3d(0, 0.2em, 0);
}
.link_underline_left::after,
.link_underline::after {
    opacity: 1;
    transform: translate3d(-101%, 0, 0);
    -webkit-transform: translate3d(-101%, 0, 0);
    -moz-transform: translate3d(-101%, 0, 0);
    -ms-transform: translate3d(-101%, 0, 0);
    -o-transform: translate3d(-101%, 0, 0);
}
.link_underline_left::after,
.link_underline::after {
    opacity: 1;
    transform: translate3d(-80%, 0, 0);
    -webkit-transform: translate3d(-80%, 0, 0);
    -moz-transform: translate3d(-80%, 0, 0);
    -ms-transform: translate3d(-80%, 0, 0);
    -o-transform: translate3d(-80%, 0, 0);
}
.link_underline_left:hover::after,
.link_underline_left:focus::after,
.link_underline:hover::after,
.link_underline:focus::after {
    transform: translate3d(0, 0, 0);
}