テキストに蛍光ペンのように色を付ける（マーカー風アンダーライン）

テキストに蛍光ペンのように線を引く、太さも自由に調整できるような方法を紹介します。

CSSでbackground-colorやborder-bottomを使用し、テキストの背景全体に色を付けたり、アンダーラインを引くことが出来ますが、テキストの下半分だけ色を付けたいといった場合などにはこちらのプロパティでは難しいです。

今回はbackground-imageを使用して線の太さ（高さ）も自由に調整できる線の引き方を紹介します。

コード

.marker {
  // テキストの下半分を黄色マーカー
  background-image: linear-gradient(to bottom, transparent 50%, #fcee21 50%);
}

<p>サンプルサンプル<span class="marker">下半分黄色マーカー</span>サンプルサンプル</p>

サンプルサンプル下半分黄色マーカーサンプルサンプル

linear-gradient()を使ってテキスト背景に色を設定します。

to bottomで上から下方向への設定にし、上半分を透明transparent、残りの下半分を指定したい色にします。

デモ

See the Pen テキストに蛍光ペンのように色を付ける by yoshi (@mikanbako) on CodePen.