求助：CSS ::after伪元素实现的标题下划线无法随文本换行

用::after伪元素做下划线时，伪元素只会附着在整个标题元素的末尾，没法跟着换行的文本走——这是因为伪元素属于元素的子节点，并非文本行的一部分。下面给两种靠谱的实现方案：

方案1：用原生文本装饰属性（最简单） #

直接利用CSS原生的text-decoration系列属性，自带多行跟随效果，还能自定义样式：

.blog-title {
  text-decoration: underline;
  // 自定义下划线颜色
  text-decoration-color: #2c3e50;
  // 下划线厚度
  text-decoration-thickness: 2px;
  // 下划线和文本的间距
  text-underline-offset: 3px;
  // 避免下划线被字母（比如g、y）截断
  text-decoration-skip-ink: none;
}

方案2：用背景渐变模拟（兼容性更好） #

如果需要更精细的控制（比如下划线长度、渐变效果），可以用线性渐变背景实现，自动跟随文本换行：

.blog-title {
  // 让背景跟随文本换行
  display: inline;
  // 线性渐变画下划线
  background-image: linear-gradient(to right, #2c3e50 100%, transparent 0);
  background-position: bottom;
  // 第一个值是宽度（100%即和文本等宽），第二个是下划线厚度
  background-size: 100% 2px;
  background-repeat: repeat-x;
  // 调整下划线和文本的距离
  padding-bottom: 2px;

  // 如果标题是块级元素，加上这两行让换行时背景克隆显示
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

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