今回は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;（冒頭のコード内でコメントアウトしてます）
ええやんええやん
