【css】テキストに蛍光ペン風アンダーラインを設置する方法

重要な単語や文字を強調させたい場合、アンダーラインだけでは、あまり目立たず文章に埋没してしまうことがありますよね？

「大切な部分が埋没。。。」

そこで、今回は、中途半端なアンダーラインより目立つ蛍光マーカー風のアンダーラインの表現方法をご紹介します。

蛍光ペン風アンダーラインの作り方

今回2種類の作り方をご紹介します。

borderで設置する方法とlinear-gradientで設置する方法です。

ご覧のように、インライン要素<span>に設置するので、どちらの方法も折り返しに対応できます。それでは早速設置方法をみてみましょう！

borderで設置する

サンプルでは5pxの太さの蛍光ペン風アンダーラインを設置しましたが。もちろん好みによって変更可能です。

ただし、複数行にわたる文章内で使用する場合は、他の文章に被ってしまわないように注意が必要です。

borderでの設置は、とてもシンプルな発想で、設置も簡単なのですが、文字とアンダーラインの間を細かく調整することができません。

もし、この部分を調整したいのであれば、次のlinear-gradientで設置する方法が最適です。

linear-gradientで設置する

先ほどのborderで設置するサンプル同様、5pxの太さの蛍光ペン風アンダーラインを設置しました。太さの調整はlinear-gradient内の5pxの部分を変更することで調整可能です。

先ほど、課題として、文字とアンダーラインの間の距離を調整する方法について書きましただ、この調整はpadding-bottomの大きさを変えることで調整できます。

最後に

直観的には、borderでの設置のほうが簡単だと思いますので、文字とアンダーラインの間の距離を調整が重要でない場合は、borderでの設置、文字とアンダーラインの間の距離を調整が必要な場合はlinear-gradientでの設置を選ぶといいと思います。

蛍光ペンで引いたようなラインマーカーをテキスト上に設置する方法についてはコチラの記事でも扱っていまいますので是非チェックしてみてください。