CSSで複数行に渡ってテキストにマーカーを引く方法

2019/12/29

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、CSSで複数行に渡ってテキストにマーカーを引く方法をご紹介します。

疑似要素を使って蛍光色マーカーを表現する方法もありますがそちらは今回紹介いたしません。

それでは参りましょう。

CSSで複数行に渡ってテキストにマーカーを引けるようになろう！

今回実装する蛍光色マーカーのイメージを共有します。

こんな感じです(^o^)

↓↓↓

大好きなUVERworldの曲の歌詞にマーカーを引いてみました笑

任意の要素内のテキストに複数行に渡ってマーカーを引くポイントは以下になります！

さて、それでは実際にCSSで作った複数行マーカーのサンプルコードを見てみましょう！

↓↓↓

重要なのは、以下の２行です！

index.css

display: inline;
 background: linear-gradient(transparent 72%, #5bc8ac 0%);

あと、マーカースタイルを適用するテキストは見づらくなってしまうので太字にしてあげるのも忘れずに(^o^)

以上、CSSで複数行に渡ってテキストにマーカーを引く方法をご紹介しました。

linear-gradientって色んな使い方ができる超ハイスペック関数だなと感動しましたね笑

最後までご高覧いただきありがとうございました！