html - 多行文本的过渡下划线

Question

最近我注意到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 元素中。

Answer 1

#borderText {
 border-bottom: 1px solid white; 
 transition: .5s;
 display: inline;
cursor: pointer;
}

#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>

#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>

#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>

#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>