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

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

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

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

完成形はこちら。

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

 

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

HTML

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

CSS

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

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

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

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

まとめ

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

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事