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

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如何设置多行文本的可调下划线距离？的详细内容，更多请关注其它相关文章！