CSSで複数行の下線を引く場合、以下のサイトを参考に実装してみました。
やり方としては下線を引きたい箇所に以下のクラスを付与したspanタグなどで囲うことで実現できます。
.under_line{background:linear-gradient(transparent70%,#eb40340%);display:inline;}しかし、どうしたことかうまく適応されませんでした。
親要素のdisplayに注目
親要素のdisplayがflexだった場合、このCSSがうまく適用されないことがわかりました。
ですので、例えば以下のようなHTMLの場合
<h1><spanclass="under_line">複数行になる文章
</span></h1>h1にdisplay: flex;が適用されていると複数行に渡った下線になりません。
<h1><divclass="headline-inner"><spanclass="under_line">複数行になる文章
</span></div></h1>この様にheadline-innerというクラスを付与した要素をはさみ、これをdisplay: block;にすることで正しく下線が引かれます。
セマンティックかどうか微妙なので、h1やpなどの要素にdisplay: flex;を適用せずに、親要素を作ってそちらにflexをつけたほうが良いかなと思います。