css 多行文本，如何实现距离可调的下划线？

Question

我需要实现图中蓝线的样式。

下方黑色是默认的 text-decoration: underline; 效果

要求：

1. 多行文本
2. 颜色可调（下划线的颜色可调整）
3. 距离可调（文字和线的位置可调）

Answer 1

https://jsbin.com/kurekinote/...,output

text-decoration + text-underline-offset

Answer 2

text-decoration-color 是控制颜色的。

text-decoration-thickness 是控制粗细的。

text-underline-offset、text-underline-position 是控制间距和位置的。

但这几个都是比较新的 CSS 属性，具体兼容性你自己上 caniuse.com 上查吧（IE 肯定是不支持的）。

要想更低版本兼容的话你只能自己用 canvas 算换行、然后每行用单独的元素 + border-bottom 去控制了。

Answer 3

预览：demo 传送门

就是说为什么非得用text-decoration呢？

// html
<div id='text'>Home pageHome pageHome pageHome pageHome pageHome pageHome pageHome pageHome pageHome page</div>

// css
#text {
  font-weight: bold;
  font-size: 1.5rem;
  border-bottom: 2px solid pink; // 下划线
  padding-bottom: 10px; // 下划线和字体距离
  width: 100%;
  display: inline; // 行内样式
  line-height: 100px; // 控制行高
}

Answer 4

要不你考虑一下svg背景？