如何用CSS在多行文本中创建可调节距离和颜色的下划线？

css实现距离可调的下划线：多行文本，色彩可控

在网页设计中，我们经常需要处理文本下划线的样式，尤其是多行文本的情况。常规的 text-decoration: underline 只能提供基本的水平下划线效果，无法满足诸如颜色可调、距离可调等需求。

值得庆幸的是，css提供了text-underline-offset属性，与 text-decoration 配合使用，可以实现更丰富的下划线样式。以下是一些具体步骤：

1. 设置文本下划线

首先，使用 text-decoration 属性设置文本下划线的基本样式：

p {
  text-decoration: underline;
}

2. 设置下划线颜色

为了设置下划线的颜色，使用 color 属性：

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

3. 调整下划线距离

最后，使用 text-underline-offset 属性调整下划线与文本之间的垂直距离。正值向上偏移，负值向下偏移。

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

通过上述设置，可以实现多行文本、颜色可调、距离可调的下划线效果。

完整代码示例：

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

演示链接：

[https://jsbin.com/kurekinote/](https://jsbin.com/kurekinote/)

以上就是如何用CSS在多行文本中创建可调节距离和颜色的下划线？的详细内容，更多请关注其它相关文章！