html - 多行的动画文本下划线(从左到右绘制动画)

Question

我对如何在多行文本上模拟我在下面的代码中为单行文本(悬停时)显示的相同效果感到疯狂。

.underline-on-hover
{
  position:relative;
  display:inline-block;
}

.underline-on-hover::after
{
  content: " ";
  background-color: red;
  width:0;
  position: absolute;
  left:0;
  bottom:0;
  height:5px;
  
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;

}

.underline-on-hover:hover::after
{
  width:100%;
}

<p class="underline-on-hover">
I'm a single line text!
</p>
<br><br>
<p class="underline-on-hover" style="max-width:200px">
I'm a multiple line text... let me prove it: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

如你所见，我可以为单行文本模拟这个从左到右的“下划线”动画，但我不知道如何为多行文本做这个，我的问题是我不能轻易地将它分成几行，因为它将是插入到动态容器中的动态文本...

知道如何实现吗？

非常感谢!

Answer 1

也许你应该试试 How to select nth line of text (CSS/JS)使用 jQuery 解决方案来指定每一行，然后使用您的 css。