改行しても崩れないテキストマーカーを作るには

みなさんこんにちは。サウナマン Nです。

今日はテキストにマーカーを入れるCSSをサクッと紹介したいと思います。
そんなもん、borderでやれば良いのでは？と思ったそこのアナタ！改行したときの事を考えられていますか？もしそうでないのなら注意が必要です。

まずは、実装したいものを見てみましょう。↓

---

こちらはマーカーを入れるテキストです。改行に対応していますので、デバイス幅が縮まっても安心です。

---

うん、めっちゃ簡単そうですね。ですが１点落とし穴があります。

borderではなくbackgroundを使おう

こちらを実装するには、borderではなくbackgroundを使います。
afterなどの疑似要素をブロック要素にして、borderで実装してしまうと改行したときに崩れてしまいます。

ですので、backgroundをつかって透明な部分と色を付ける部分を調整しましょう。

てっとり早く具体的なコードをば。

.markerUnder {
  background: linear-gradient(transparent 60%, #f2cf39 0%);
  display: inline;
  padding: 0 1px 0px;
}

backgroundで背景色を調整し、マーカーの色と高さを決めます。inline要素にしてしまえば改行も怖くありません。

paddingは余白やマーカーをどの程度下げるかを調整します。

まとめ

かなり簡単に思えますが、意外と知らないと改行対策ができずに躓く部分です。spanタグなどで囲ってうまく使っていきましょう！