CSSで複数行の下線を引く場合、以下のサイトを参考に実装してみました。

やり方としては下線を引きたい箇所に以下のクラスを付与したspanタグなどで囲うことで実現できます。

.under_line {
  background: linear-gradient(transparent 70%, #eb4034 0%);
  display: inline;
}

しかし、どうしたことかうまく適応されませんでした。

親要素のdisplayに注目

親要素のdisplayがflexだった場合、このCSSがうまく適用されないことがわかりました。
ですので、例えば以下のようなHTMLの場合

<h1>
  <span class="under_line">
    複数行になる文章
  </span>
</h1>

h1にdisplay: flex;が適用されていると複数行に渡った下線になりません。

<h1>
  <div class="headline-inner">
    <span class="under_line">
      複数行になる文章
    </span>
  </div>
</h1>

この様にheadline-innerというクラスを付与した要素をはさみ、これをdisplay: block;にすることで正しく下線が引かれます。
セマンティックかどうか微妙なので、h1やpなどの要素にdisplay: flex;を適用せずに、親要素を作ってそちらにflexをつけたほうが良いかなと思います。

DEMO
https://jsfiddle.net/kubotak/42L1y9mr/1/