2020年04月06日

CSSで蛍光ペンのような下線を引く方法(複数行編)

CSSで蛍光ペンのような下線を引く方法(複数行編)
CSSで蛍光ペンのような下線を引く方法(複数行編)

お世話になっております。SeekNextの佐藤です。
今回は前回の記事に続き、蛍光ペンのような下線の続きに関して書いていこうと思います。

前回の記事をご覧になっていない方はこちらも参考にしてみてください!

今回はタイトル通り、「複数行」にマーカーを引く方法を書いていきます。

前回の記事通りに行うと、複数行にマーカーを引く際に、以下のようになり見た目がおかしくなります。

これを解消する方法について解説していきます!

HTML

<p>テキストテキストテキスト<span class="marker">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</span>テキストテキスト</p>

CSS

.marker {
  background: linear-gradient(to bottom, transparent 69%, #ff7f7f 70%, #ff7f7f 100%);
 }

たったこれだけです!
擬似要素を使用することもないので、基本的にはこっちのパターンを使用した方がいいと思います。
ひとつだけ注意点があるとすればこの方法はinline要素にしか使えません。block要素やinline-block要素の使用したい場合は前回の記事のやり方(擬似要素を使用)を試してみてください。

background: linear-gradient(#上の色 グラデ開始位置(%), #下の色 グラデ終了位置(%));

他のサイトには省略した書き方が書いてあることもありますが、この書き方が一番理解しやすいのではないでしょうか?

是非この記事を参考に思い描く線を描いてみてください!