Html 如何使用CSS在多行文字上创建波浪下划线？

我尝试了这些方法，发现它们无法保持文本的原始状态。它们只显示在一行中。如果所选范围超过一行，则不会显示。有谁能告诉我如何改进它吗

.err{
边框底部：2个点红色；
显示：内联块；
位置：相对位置；
}
.呃：之后{
内容：''；
高度：5px；
宽度：100%；
边框底部：2个点红色；
位置：绝对位置；
显示：块；
底部：-3px；
左：-2px；
}

这是第一行

这是第二行

这里有一个简单的解决方案

最初的解决方案是在

只需像这样使用

包装

html

文本选择

<p>
   Lorem ipsum dolor sit amet, <span class="error">consectetur adipiscing
   elit</span> Maecenas.
</p>

Lorem ipsum dolor sit amet，Concertetur Adipising
精英梅塞纳斯。

请参见示例：

p{
文字装饰：下划线；
-moz文字装饰颜色：红色；
文字装饰颜色：红色；
-moz文本装饰风格：波浪形；/*Firefox代码*/
文字装饰风格：波浪形；
}

---

这里有一些带有红色波浪下划线的文本
 

以下是我的波浪线解决方案：

.err{
背景图像：
线性梯度（45度，透明65%，红色80%，透明90%），
线性梯度（135度，透明5%，红色15%，透明25%），
线性梯度（135度，透明45%，红色55%，透明65%），
线性梯度（45度，透明25%，红色35%，透明50%）；
背景重复：重复-x；
背景尺寸：8px2px；
背景位置：095%；
}

此文本中包含tpyo

这篇文章里有一个logner pyto辣味墨西哥胡椒培根ipsum dolor amet尾部嫩腰肉doner turducken shankle，肉糕侧翼排骨三尖火腿kielbasa鸡肉alcatra landjaeger。恶魔岛肉丸猪肉、小腿肉面包、波切塔比尔顿猪。

查看。这是我得到的最短的

可以在文本内容的整个长度上绘制

.err{
文字装饰：红色波浪下划线；
文本装饰跳过墨水：无；
}

此文本中包含tpyo

这篇文章里有一个logner pyto辣味墨西哥胡椒培根ipsum dolor amet尾部嫩腰肉doner turducken shankle，肉糕侧翼排骨三尖火腿kielbasa鸡肉alcatra landjaeger。恶魔岛肉丸猪肉，香肠肉糕波切塔比尔顿猪。

希望您至少尝试为自己编写代码。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请带着您的代码回来，并解释您尝试了什么以及为什么它不起作用。

<p>
   Lorem ipsum dolor sit amet, <span class="error">consectetur adipiscing
   elit</span> Maecenas.
</p>