文本环绕元素的动画下划线悬停效果

Question

我正在浏览 https://2019.stateofcss.com/，注意到他们为链接提供的下划线悬停动画很好。有趣的是，当<a>标签内的文本换行并跨越多行时，他们如何禁用下划线悬停效果。

他们是如何仅在文本换行时禁用下划线悬停效果的？

似乎没有任何内联或附加类被应用，并且无论文本是否换行，CSS 规则看起来都是相同的。

有人知道他们是如何实现这个魔法的吗？

Answer 1

评论是正确的 - 该网站没有处理链接被下划线的情况。

但是 - 我找到了一种替代解决方案，可以处理多行下划线动画。他们正在为元素设置背景图像并应用相同的原则

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;
}