最近我注意到text-decoration: underline
无法进行动画过渡。经过一番研究,我发现最好和最常见的解决方案是使用border-bottom
。但是如下代码片段所示,border-bottom
在这种情况下并不是最佳解决方案。
#borderText {
border-bottom: 1px solid white;
transition: .5s;
}
#borderText:hover {
border-bottom: 1px solid black;
}
#textDecor {
text-decoration: none;
transition: .5s;
}
#textDecor:hover {
text-decoration: underline;
}
<p id="borderText">
Lorem Ipsum Sit Amet<br />
Some other Text<br />
Some Other Text<br />
</p>
<p id="textDecor">
Here is some text<br />
with text-decoration and<br />
as you should see, the text<br />
is underlined but cannot be transitioned<br />
</p>
为了澄清问题和目标,我需要解释一下:
问题:如何过渡具有多行文本的文本下划线?
目标:高效地解决上述问题,而且最好不使用任何技巧。
现在,如果没有某些技巧是不可能的,我个人怀疑这一点,请提供简单的技巧,但请不要使用标记和奇怪的方法,例如将每个字放入span元素中。
border-bottom
不是好的解决方案? - Pedramborder-bottom
来完成这个操作。 - Pedram