text-decorationプロパティを利用して複数行の文字に下線を引きます。複数行に対応させるため、inline要素に適用します。
デモページはこちら

以下のhtml構造で確認します。参考までにbackground-imageプロパティのlinear-gradientを利用した下線も表示します。

<p>linear-gradient</p>
<div class="div-parent">
  <span class="span-child-01">linear-gradientを利用した文字の下線<br>inline要素に適用して複数行に対応</span>
</div>
<p>linear-gradient　※下線位置を2px上に調整</p>
<div class="div-parent">
  <span class="span-child-02">linear-gradientを利用した文字の下線<br>inline要素に適用して複数行に対応</span>
</div>
<p>text-decoration</p>
<div class="div-parent">
  <span class="span-child-03">text-decorationを利用した文字の下線<br>inline要素に適用して複数行に対応</span>
</div>
<p>text-decoration　※下線位置を0.2em上に調整</p>
<div class="div-parent">
  <span class="span-child-04">text-decorationを利用した文字の下線<br>inline要素に適用して複数行に対応</span>
</div>

CSSは以下になります。text-decoration-thicknessは下線の太さ、text-decoration-colorは下線の色、text-underline-offsetは下線の位置、text-decoration-skip-inkは下線と文字の重なり方です。

.div-parent {
  line-height: 1.5;
  min-height: 100px;
  margin: 0 0 1em;
  background-color: #fff;
}

.span-child-01 {
  background: linear-gradient(transparent 60%, #eae5d6 60%);
}
.span-child-02 {
  background: linear-gradient(transparent 60%, #eae5d6 60%) left bottom 2px;
}
.span-child-03 {
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: #eae5d6;
  text-decoration-skip-ink: none;
}
.span-child-04 {
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: #eae5d6;
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
}

text-decoration-colorは透過度を設定しなくても下線は文字の背面に重なります。text-underline-offsetを設定しないと下線と文字が重なりません。text-decoration-skip-inkの初期値はautoで、下線と文字が重なると下線が途切れてしまいます。noneを指定すれば下線が省略されません。