如何实现文本换行后锚点标签下划线完整延续显示？

补充说明 #

我的问题与标记为重复的问题完全不同。我要实现的是下划线延续至文本末尾，无论文本分为一行、两行还是三行。

我需要在锚点标签（a标签）下方显示下划线，已尝试以下代码，但遇到问题：我给ul标签设置了300px宽度，锚点文本被分成两行，但下划线未覆盖换行后的文本。

当前输出 #

预期输出 #

我需要让“of mentoring”下方也显示下划线

尝试的代码 #

CSS代码 #

ul {
  width: 300px
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

ul li a {
  position: relative;
  font-size: 28px;
  line-height: 32px;
  color: #000;
}

ul li a:after {
  content: "";
  background-color: red;
  width: 100%;
  height: 10px;
  display: block;
  position: absolute;
  bottom: 5px;
  z-index: -1;
}

HTML代码 #

<ul>
  <li>
    <a href="">The role of mentoring</a>
  </li>

  <li>
    <a href="">Research backed benefits of mentoring</a>
  </li>

</ul>

把原本用绝对定位伪元素实现下划线的方式，换成背景渐变+盒装饰断裂克隆的方案，这样能让下划线跟随每行文本延伸到末尾。

修改后的CSS代码如下：

ul {
  width: 300px
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

ul li a {
  position: relative;
  font-size: 28px;
  line-height: 32px;
  color: #000;
  /* 核心样式 */
  background: linear-gradient(red, red) bottom left / 100% 10px no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

原理说明 #

• background: linear-gradient(red, red) bottom left / 100% 10px no-repeat：用红色渐变模拟下划线，设置在文本底部，宽度为每行文本的100%，高度10px。
• box-decoration-break: clone：让背景这类装饰在元素换行时，跟随每行文本克隆显示，而非仅显示在元素整体的底部；添加-webkit前缀兼容webkit内核浏览器。

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