【CSS】改行した時のマーカーの引き方を解説

CSSでマーカーを引けたと思ったら改行した時に崩れている！
なんてこともあるでしょう。

「linear-gradient」で解決できます。ぜひコピペして使ってみてください。

改行した時のマーカーの引き方

マーカーを引くコード

.maker {
  display: inline;
  background: linear-gradient(transparent 50%, pink 0%);
}

「すぐ使いたいよ！」という方は上記のコードを反映させたい場所へコピペしてください。
コードは下記で解説します。

色と幅は任意で変更しましょう。

コードの解説

See the Pen Untitled by kento-n96 (@kento-n96) on CodePen.

.maker {
/* インライン要素に変更 */
  display: inline;
/* 高さで計算して、上50%は透明で残り50%がピンク*/
  background: linear-gradient(transparent 50%, pink 0%);
}

まずはインライン要素にする必要があります。
ブロック要素とインラインブロック要素だと効かないようです。

上記の画像を御覧ください。
ブロック要素だと２つ目のようにブロックを基準にマーカーを引いています。

インライン要素にすると1つ目ように各行を基準にマーカーを引くことができます。

まとめ

今回は自分が実装するのに苦戦したので、備忘録としてまとめました。
もし参考になれば幸いです。

ご覧いただきありがとうございました！