Web制作で蛍光マーカーみたいな下線をコーディングしたいんだけど。。
こういう線のこと？？
そーそー！それそれ！どうすればいいのかな？
Web制作をしていると、こんな風に蛍光マーカーを引きたい時があるかと思います。
初見のときは、どうやってコーディングするのか結構悩むのではないでしょうか？
少なくとも僕は悩みました(笑)
蛍光マーカーのような下線を引く方法はいくつかありますが、本記事では、僕が一番簡単だと思っている、「background: liner-gradient」 を使用する方法を解説したいと思います。
少しでもお力になれれば嬉しいです！
CSSで蛍光マーカーのような下線を引く方法
蛍光マーカーを引く方法解説
どうやって蛍光マーカーを引く方法が簡単なの？
下線と聞いてすぐに思い当たるのが、border-bottomですが、これだと蛍光マーカーのようにテキストに被らせるのが難しいです。
他の方法として、疑似要素を使うということも考えられます。
::before とか ::after とかだね
そうです。もちろんこれでもできます。
ただ、CSSの記述量も多めなので、少しめんどうな感じがしますね。
そこで今回紹介するのが、「background: liner-gradient」 を使用する方法です。
考え方としては、backgroundでテキストの背景を塗りつぶしてしまって、liner-gradientでその一部分を透明にしてしまうという流れです。
グラデーションと聞くと、徐々に色が変わっていくイメージがあるかもしれませんが、設定次第では、グラデーションさせずに一部分だけ透明にすることが可能です！
へー、そんな便利な使い方があるんだね♪
早くコードを教えてよ～
そうですね。では、実際のコーディング例を紹介していきます。
実際のコーディング例(コピペOK)
こちらが実際のコーディング例(テンプレ)です。
テキストに緑色の下線を引いています。
さらにすごいところが、マーカーの太さや位置も自在に調整できるとういことですね！(それぞれの例を記載しました)
See the Pen Untitled by fukumaru ryosuke (@fukumaru) on CodePen.
すごく記述量が少なく、スッキリしたコードですね^^
なるほど、こうすれば簡単に蛍光マーカーみたいな下線が引けるね！便利！
このような下線は、結構実装する機会も多いので、ぜひ参考にしてみてください。
以上、「CSSで蛍光マーカーのような下線を引く方法」でした。
お役に立てればすごく嬉しいです★
