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をつけたほうが良いかなと思います。