↑↑↑こんな感じで蛍光ペンのアンダーラインを引いたようにテキスト装飾できるCSSをご紹介します！

Webページのなかで強調したいテキストがある時に役立ちます。簡単にできるので是非コピペして使ってみてください。

今回使用するHTML/CSSはこちら！

HTMLはテキストが複数行になったときも想定してspan要素で囲っています。

CSSに書いてあるliner-gradient関数は、グラデーションを表現するための関数です。今回使用する用途以外にも多くの使い方ができるので気になる方は詳しく調べてみてください。

関数の中を見てみると、下記のようになっています。

テキスト各行の上半分には背景色は必要ないのでtransparentを指定しています。その後に下半分の背景色を指定しています。

transparentのすぐ後ろの値で、ラインマーカーのように引かれる線の太さが変更できます。この数値とline-heightの値を変更して、背景に表示される線の太さやテキストとの位置を調整してください。

ブロック要素に今回のようなCSSを適用すると、テキストが複数行になったときに思い通りの表示にならないので、コツとしては、インライン要素にスタイル指定することです。

以上です！ぜひお役立てください！

売上アップ、人材採用、顧客獲得など様々なご要望に最適なホームページを制作いたします。