CSSで蛍光ペン風の線を入れる方法

最近webサイト、ほかブログでテキスト部分に蛍光ペンでなぞったような装飾をしているサイトを多く見かけました。
なので、どうすれば蛍光ペンでなぞったような装飾をできるのか調べてみました！

蛍光ペンでなぞったような装飾を加える方法

今回は「linear-gradient()」を使用します。
これはグラーデーションをするためのCSSプロパティです。

background: linear-gradient(red, blue);

このようにすると、上は赤、下は青になるようにグラデーションすることができます。
今回の光ペンでなぞったような装飾をするために上部の設定を透明にし、下だけ色を付けることでまるでマーカーで線を入れたように装飾します。

background: linear-gradient(transparent 50%, red 50%);

%の部分の数字を変更するとサイズを変更することができます。
好みのサイズに調整してみて下さい。