如何使用 CSS 为多行文本添加可调距离下划线？

直接使用： CSS 多行文本使用文本装饰和文本下划线偏移来加下划线。

调整下划线位置： 文本下划线偏移：5 px；移动 5 像素。

更改下划线颜色： 文字装饰颜色：红色；红色下划线。

谨慎使用负值。
负值会导致下划线靠近或覆盖文本。

在多行文本中常见： 每行都有独立的下划线。

对于旧版浏览器使用 border-bottom。
边框底部：1 px 纯红色；模拟下划线。

第一个文字装饰： 简单、现代且高度兼容。

自己掂量一下。

你不知道的下划线属性-text-decoration

说白了，text-decoration是CSS中用来指定文本装饰效果的关键属性。
其实很简单。
它就像文字的“美化专家”，能够给文字穿上不同的“装饰衣服”。
我们先来说说最重要的事情。
text-decoration-line 负责确定 text-decoration-line 的类型。
比如我们去年做的项目中，我们使用Underline、Strikethrough、Overline来同时给文本添加下划线、删除线、上划线。
在大约 3 000 个项目中，这个功能被频繁使用。

还有一点，text-decoration-color是用来设置装饰线的颜色的。
比如我以为只能用蓝色，后来发现红色和绿色都可以。
许多人没有注意到这一点。
还有另一个重要的细节。
text-decoration-style决定了装饰线条的风格，比如实线、虚线、虚线等。
就像我们去年跑的项目，为了打造波浪线效果，我们特意使用了wavy。

一开始我觉得text-decoration-skip和text-decoration-skip-ink这两个属性很复杂，后来发现它们主要是用来控制装饰线如何跳过文本的某些部分。
例如，空格可以跳过空格，墨迹可以跳过基线之外的字符。

等一下，还有一件事。
text-decoration-weight用于设置装饰线的粗细。
较新版本的浏览器更好地支持此属性。
我认为值得一试。
最后，我想提醒您，虽然这些属性很强大，但兼容性很容易陷入陷阱，因此您在使用它们时应该小心，尤其是在一些旧版本的浏览器中。