Animated underline hover effect for text-wrapped elements

Question

I was browsing https://2019.stateofcss.com/ and noticed the nice underline hover animation they have for the links. What's interesting though is how they've disabled the underline hover effect when the text inside an <a> tag wraps and spans multiple lines.

How did they go about disabling the underline hover effect only when the text wraps?

There doesn't seem to be any inlined or additional class that gets applied, and the CSS rules appear to be the same regardless whether or not the text is wrapped.

Anyone have any ideas how they implemented this magic?

Answer 1

The comments are correct - that website isn't handling the case when links were being underlined.

However - I have found an alternative solution that DOES handle the multiline underline animation. They're setting a background image to the element and applying the same principles

https://codepen.io/christiancroser/pen/xqrLBm

$color-on-light: black;
$underline-width: 2px;

color: $color-on-light;
background-repeat: no-repeat;
background-size: 0% 100%;
background-position: bottom right;
transition: background-size 0.15s;
padding-bottom: $underline-width;
background-image: linear-gradient(
    transparent calc(100% - #{$underline-width}),
    $color-on-light $underline-width
);

&.on-dark {
    $color-on-dark: white;

    color: $color-on-dark;
    background-image: linear-gradient(
        transparent calc(100% - #{$underline-width}),
        $color-on-dark $underline-width
    );
}

&:hover {
    background-size: 100% 100%;
    background-position: bottom left;
}