Css 如何创建斜下划线样式

我正在尝试使用CSS实现这种下划线样式。它需要处理多行文本。有人有什么想法吗

---

以下是一个基于背景颜色的想法：

p>span{
背景：
线性渐变（-225度，透明10px，红色10px）左下角，
线性梯度（-45度，透明10px，红色10px）右下角；
背景尺寸：60%10px；
背景重复：无重复；
填充：0 15px 5px；
-webkit盒装饰中断：克隆；
盒子装饰破裂：克隆；
字体大小：25px；
字体大小：粗体；
}

Lorem ipsum door sit amet，
。Nunc purus lectus，非妊娠期孕妇，consequat i

Lorem ipsum dolor

Temani Afif提供了一种干净的方法来实现这一点-如果我的答案证明，以我的方式实现相同的结果要复杂得多…

以下是我的建议：

*{
框大小：边框框；
}
.举例{
宽度：100%；
最大宽度：1248px；
保证金：0自动；
填充：20px；
背景色：红色；
位置：相对位置；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
弯曲方向：行；
对齐项目：居中；
证明内容：中心；
}
.包含{
填充：20px；
背景色：红色；
位置：相对位置；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
弯曲方向：立柱；
对齐项目：居中；
证明内容：周围的空间；
}
h1{
文本对齐：居中；
字体大小：36px；
线高：40px；
位置：相对位置；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
弯曲方向：立柱；
对齐项目：居中；
证明内容：周围的空间；
}
h1跨度{
边缘底部：10px；
位置：相对位置；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
弯曲方向：立柱；
对齐项目：居中；
证明内容：周围的空间；
}
h1.下划线{
宽度：计算（100%-20px）；
高度：10px；
位置：绝对位置；
最高：100%；
背景色：白色；
}
h1跨度。下划线：在{
内容：''；
宽度：0px；
高度：0px；
位置：绝对位置；
排名：0；
左：-10px；
背景色：透明；
边框样式：实心；
边框宽度：5px；
边框颜色：透明黑透明黑；
}
h1跨度。下划线：在{
内容：''；
宽度：0px；
高度：0px；
位置：绝对位置；
排名：0；
右：-10px；
背景色：透明；
边框样式：实心；
边框宽度：5px；
边框颜色：黑色透明黑色；
}

你好，世界
你好，人类
你好，外星人？
不，你好，艾！
你好，世界
你好，人类
你好，外星人？
不，你好，艾！
你好，世界
你好，人类
你好，外星人？
不，你好，艾！
你好，世界
你好，人类
你好，外星人？
不，你好，艾！

请向代码展示您尝试过的内容？？因此，这不是一项代码编写服务，我们帮助编写代码，发布问题的用户应该自己进行适当的研究和努力，而您显然没有这样做，并提供适当的服务。如果你做不到，请带着它回来。如果有不清楚的地方，请重读。请在回答之前正确阅读问题。一个要求是“它需要处理多行的文本”。这个答案不能解决这个问题。这可以解决问题，只要你可以声明换行符使用跨距的位置。Temani Afif已经为您提供了一种解决方案，我只是给了您另一种方法。