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

こんにちはtakosanです。

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

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

目次

さっそく完成品

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

解説

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

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

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

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

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

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

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

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

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

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

font-weight: 900;

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

ではよいWebライフを~

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次