如何为多行标题的每行添加自定义下划线？（已尝试:before/:after）

哈哈，这个坑我踩过！用:before/:after伪元素做标题下划线的时候，单行完美适配，一换行就只剩最后一行有下划线——本质是伪元素绑定在整个标题的块级元素上，没法跟着每行文本的行盒走对吧？给你几个实用的解决方案，按需选择：

1. 用背景渐变模拟自定义下划线（最灵活） #

如果你需要自定义下划线的颜色、粗细、甚至渐变效果，这个方法绝对靠谱，还能完美适配换行场景：

.title-underline {
  /* 用线性渐变创建下划线背景 */
  background-image: linear-gradient(currentColor, currentColor);
  /* 把渐变定位到文本底部 */
  background-position: bottom left;
  /* 控制下划线宽度（100%占满行宽）和粗细（最后一个值） */
  background-size: 100% 2px;
  /* 让渐变在每行重复显示 */
  background-repeat: repeat-x;
  /* 调整下划线和文本的间距 */
  padding-bottom: 3px;
  /* 确保背景跟着文本行走，不要用block */
  display: inline;
}

优势：可以轻松改成渐变下划线（比如linear-gradient(#ff4444, #ff8888)）、虚线下划线（用repeating-linear-gradient），兼容性也很好，几乎所有现代浏览器都支持。

2. 利用现代浏览器的text-decoration增强属性（最简洁） #

如果你的需求不需要特别复杂的自定义样式，现代浏览器已经给text-decoration加了很多实用属性，原生下划线本来就支持每行都显示：

.title-underline {
  text-decoration: underline;
  /* 自定义下划线粗细 */
  text-decoration-thickness: 2px;
  /* 调整下划线和文本的偏移量 */
  text-underline-offset: 3px;
  /* 自定义下划线颜色 */
  text-decoration-color: #ff4444;
}

优势：代码最简洁，没有额外布局影响，兼容性也不错（Chrome、Firefox、Safari 15.4+、Edge都支持），如果项目不需要兼容老浏览器，优先选这个。

3. 伪元素配合box-decoration-break（备选方案） #

如果你一定要用伪元素实现，可以试试box-decoration-break: clone属性，它能让元素断行时，每个行盒都克隆伪元素的样式：

.title-underline {
  display: inline-block;
  position: relative;
  /* 关键属性：断行时克隆元素样式 */
  box-decoration-break: clone;
}
.title-underline:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
}

注意：这个属性的兼容性稍弱（比如Safari 13.1以下不支持），而且在某些复杂布局下可能出现样式偏移，所以更适合作为备选方案。

内容的提问来源于stack exchange，提问作者Nenad Drobac