.customHref {
    width: max-content;
}
.customHref a {
    position: relative;
    user-select: none;
    cursor: pointer;
    color: var(--baseTextColor);
    text-decoration: none;
    overflow: hidden;
}
.customHref .underLine {
    position: relative;
    background-color: var(--baseTextColor);
    height: 1px;
    width: 0;
    opacity: 0;
    transition:
    opacity    var(--baseDuration) ease-in-out,
    width      var(--baseDuration) ease-in-out;
}
.customHref:hover .underLine {
    width: 100%;
    opacity: 1;
}
@keyframes customHrefCharAnim {
    from {
        top: 0;
        opacity: 1;
    }
    40% {
        top: calc(var(--translateYMax) * -1);
    }
    49% {
        top: calc(var(--translateYMax) * -1);
    }
    50% {
        opacity: 0;
    }
    51% {
        top: var(--translateYMax);
    }
    60% {
        top: var(--translateYMax);
    }
    to {
        top: 0;
        opacity: 1;
    }
}
.customHref:hover a span.char {
    position: relative;
    display: inline;
    --translateYMax: .15em;
    animation: customHrefCharAnim calc(var(--baseDuration) * 1.5) ease-out;
    animation-delay: calc(
        var(--charIdx) * var(--baseDuration) * .1
    );
    transition:
    top     var(--baseDuration) ease-in-out,
    opacity var(--baseDuration) ease-in-out;
}