多行文本转换下划线

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元素中。

- HTMLNoob

---

为什么您认为border-bottom不是好的解决方案？ - Pedram

我需要为所有文本行添加下划线。 - HTMLNoob

好的，您可以使用相同的 border-bottom 来完成这个操作。 - Pedram

抱歉，我不知道使用 display: inline;。 - HTMLNoob

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>

- Abhinav