.link {
    text-decoration: none;
    color: inherit;
    position: relative;
}

.link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: currentColor;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.link:hover::after {
    transform: scaleX(1);
}

@media (max-width: 700px) {
    .link::after {
        display: none;
    }

    .link {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
    }
}