.link-underline {
    position: relative;
}

.link-underline__text {
    position: relative;
}

.link-underline__text::before {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: var(--link-underline-height);
    background: currentColor;
    content: "";
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--link-underline-duration);
}

@media (hover: hover) and (pointer: fine) {
    .link-underline:is(:hover, :focus-visible) .link-underline__text::before {
        transform: scaleX(1);
        transform-origin: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-underline__text::before {
        transition: none;
    }
}