如何在多行文本设计中实现距离可调的下划线？

可调节距离下划线，提升多行文本设计

在网页设计中，为文本添加下划线是一种常见的样式效果。但有时，我们需要自定义下划线的位置和颜色，以满足特殊的设计需求。

问题：如何实现距离可调的下划线？

需求：

• 多行文本
• 颜色可调
• 距离可调（文字和线的位置可调）

解决方案：

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

登录后复制

本解决方案使用了 text-underline-offset 属性来调整下划线与文本之间的距离，单位为像素。通过设置 text-decoration-color，我们可以改变下划线的颜色。

[在线示例](https://jsbin.com/kurekinote/...,output)

以上就是如何在多行文本设计中实现距离可调的下划线？的详细内容，更多请关注抖狐科技其它相关文章！