CSSでテキストにマーカー風のラインを引く方法

今回はCSSで文章の一部にマーカー風のラインを引く方法を紹介します。

複数行になったときも対応しています。

さっそく完成品

See the Pen css-marker by takosan (@Yukiwebcreate) on CodePen.

解説

inline要素にlinear-gradientを使って、

上部60%を透明にした背景色を当てることで、マーカーを引いた風に表現しています。

なんと説明はこれで以上です。

linear-gradientについてはこちらの記事も合わせてご覧ください▼

あわせて読みたい

【背景グラデ】linear-gradientの使い方 背景にグラデーションをかけたいけどやり方がわからない。 そんな時にはlinear-gradientを使うといいのでそれについて解説します。 キレイなグラデ、かけたいっす まず…

ちなみに色を変えたい時は、linear-gradientの中の後半の色を変えるだけでOKです。

また、マーカーのラインの高さや位置を変えたいときは、

paddingの数値をいじってもらうと自由に位置を変えることができます。

複数行にも対応していますので、いろんなところで活用できそうですね！

また、マーカーが当たる部分を太字にするとさらに強調されていい感じです。

お好みに合わせて下記のスタイルも.markerの中に付け足してみてください。

font-weight: 900;

（冒頭のコード内でコメントアウトしてます）