CSS如何设置多行文本的可调下划线距离？

从现在开始，努力学习吧！本文《CSS如何设置多行文本的可调下划线距离？》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

css 多行文本实现距离可调的下划线

在网页设计中，需要对多行文本添加下划线，并可调整其颜色和与文本的距离。对此，可用 css 的 text-decoration 和 text-underline-offset 属性实现。

实现步骤：

1. 设置基础样式：使用 text-decoration 属性添加下划线，然后使用 color 属性设置线的颜色。

p {
  text-decoration: underline;
  color: blue;
}

2. 调整距离：通过 text-underline-offset 属性可以调整下划线与文本的距离。正值表示下划线在文本下方，负值表示在其上方。

p {
  text-underline-offset: 5px;
}

完整代码：

<p>多行文本</p>
<p>颜色可调（下划线的颜色可调整）</p>
<p>距离可调（文字和线的位置可调）</p>

p {
  text-decoration: underline;
  color: blue;
  text-underline-offset: 5px;
}

在线示例：

[查看演示](https://jsbin.com/kurekinote/...,output)

今天关于《CSS如何设置多行文本的可调下划线距离？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！