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

文字换行元素的动画下划线悬停效果

1 个答案: