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

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

こんにちは。

UVERworld布教クリエイターのゆうや(@yuyaphotograph)です!

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

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

それでは参りましょう。

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

完成イメージ

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

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

↓↓↓

cssで複数行に渡ってマーカーを引く方法サンプル

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

CSSで複数行マーカーを引くポイント

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

  • マーカーはbackgroundのlinear-gradientで表現する
  • transparentで上から何%までマーカーを透明にするか指定する
  • blockやinline-blockではなくinline要素にする

サンプルコード

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

↓↓↓

See the Pen
cssマーカー
by 石森裕也 (@yuyaphotograph)
on CodePen.

重要なのは、以下の2行です!

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

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

まとめ

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です