今回はCSSで「テキストの背景に蛍光ペンのようなアンダーラインをつける方法」について紹介します。

装飾の幅が広がると思うので、是非参考にしてみてください。

【CSS】テキストの背景に蛍光ペンのようなアンダーラインを引く方法

完成形はこちら。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

テキストの背景に対して、蛍光ペンのようなアンダーラインが引かれていることが分かるでしょう！

HTML

<p>ここに<span class="underline">マーカー線</span>を引きます。</p>

pタグを用意して、その中にマーカー線を引きたいテキストをspanタグで囲います。

CSS

.underline {
    background: linear-gradient(transparent 50%, red 50%);
}

蛍光ペンのようなマーカー線をテキストの背景に引くためには、linear-gradientプロパティを使います。

transparentを50％と指定することで、上から50％までは透明になります。

その後にマーカー線の色を指定したらOK。

これで蛍光ペンのようなアンダーラインを引くことが出来ました！

まとめ

以上が、「テキストの背景に蛍光ペンのようなアンダーラインを引く方法」でした。