这可以通过使用text-decoration和text-underline-offset来实现👇：

ul {
  width: 300px;
  list-style: none;
}

ul li {
  list-style: none;
}

ul a {
  font-size: 28px;
  line-height: 32px;
  color: black;
  text-decoration-line: underline;
  text-decoration-thickness: 10px;
  text-decoration-color: red;
  text-underline-offset: -7px;
  text-decoration-skip-ink: none;
}

<ul>
  <li>
    <a href="">The role of mentoring</a>
  </li>
  <li>
    <a href="">Research backed benefits<br> of mentoring</a>
  </li>
</ul>

要在锚标记文本下方显示下划线，即使它被分成两行，请将锚点标记的显示属性设置为inline-block。这允许下划线跨越锚点标记的整个宽度，即使内容跨越许多行。
这是正确的CSS代码：

ul {
  width: 300px;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
  display: inline-block; /* added */
}

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>

这应该会给予所需的结果，下划线出现在整个锚标记文本的下方，包括跨多行换行的文本。

由于下划线是absolute，这应该可以解决问题。请注意，这不是最佳解决方案，因为它剥离了a元素内的HTML标记。

document.querySelectorAll(".underline").forEach((block) => {
  block.innerHTML = block
    .innerText
    .split(' ')
    .map((word) => `<span class="underline-wrap">${word}</span>`)
    .join(' ');
});

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.underline {
      display: inline-block;
      position: relative;
      overflow: hidden; /* hide excess of line produces by left: -10px; right: -10px;*/
    }
    ul li .underline-wrap { position: relative; }
    ul li .underline-wrap:after {
      content: "";
      background-color: red;
      height: 10px;
      display: block;
      position: absolute;
      bottom: 5px;
      left: -10px; /* fill gaps between words */
      right: -10px; /* fill gaps between words */
      z-index: -1;
    }

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

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

    </ul>