ブログやLPでよく見る蛍光ペン風ラインをたった１行で完成させます。
太さや色も簡単に変更できるので覚えていて損はないですよ。
【CSS】linear-gradientで蛍光ペン風ラインを作る
今回はlinear-garadientを使用します。
See the Pen 蛍光ペン１ by sukimadou (@sukimadou) on CodePen.
ラインを引きたい<p>のbackgroundにlinear-garadientを指定することで重なったラインのように見せています。
background: linear-gradient(transparent 0%, #ffff66 0%);（）の中で色と幅を指定。
本来linear-garadientはグラデーションを作成するものですが、ここではラインを引くことだけを考えて説明します。
ラインの太さや色を変えてみる
・テキストを覆うように太くラインを引きたい
（transparent 0%, #ffff66 0%）
・細いラインを引きたい
（transparent 50%, #ffff66 50%）
例のように％の数字を上げていけばOK
・色を変えたい
（transparent 50%, #87cefa 50%）
色指定の部分を好きな色に
上に書いたように（）内の数値と色の指定を変更するだけで様々なラインが作れます。
display:inline-blockでテキストの部分だけにラインを引く
サンプルコードでも記述していますが、ラインを引きたい<p>に対してdisplay:inline-block;を指定することでテキスト幅に合わせたラインが引けます。
サンプルコードの一番したの行のみdisplay:inline-block;を外してありますので、参考にしてください。
指定しないことで、要素の幅いっぱいにラインが引かれています。
