ブログの記事なので読みやすくするために、重要部分に線を引いたり、色を変えたり、太くしたりと色々表現はありますが、最近マーカ風のアンダーラインを引くやり方が多くあります。
今回はいくつかの方法でCSSでマーカー風のアンダーラインを引く方法を解説します。
【1】グラデーションを使う方法（おすすめ度80％）
ブログの記事本文内などで、一番多く使われている手法ですね。
記事本文中の重要ポイントにアンダーラインを引く場合はこれで問題ないと思います。
ただし、書体によっては、太いアンダーラインになる場合があります。
あと、「padding-bottom」の数値が高いと、アンダーラインが下にいってしまい、文字から離れてしまいます。
1 | <p class="under-line01"><b>グラデーションを使ってマーカー風のアンダーラインを引く</b></p> |
4 | background: linear-gradient(transparent 60%, #ffde00 60%); |
【2】backgroundを使う方法（おすすめ度70％）
グラデーションのアンダーラインと違って、線の太さが画像のサイズ分で固定なので、数値通りの数字になりますが、レスポンシブでスマホ対応させた時は（background-size）を調整する必要があります。
大した容量じゃないんですが、当然画像を使うので、グラデーションで引く場合より容量を食います。
1 | <p class="under-line02"><b>before要素を使ってマーカー風のアンダーラインを引く</b></p> |
3 | background: url(img/line-bg.png) repeat-x 0 100% rgba(0, 0, 0, 0); |
【3】before要素を使う方法（おすすめ度25％）
疑似要素を使って引くこともできますが、改行した時に下の行にアンダーラインが引かれないので、文章量の多い場合はおすすめしません。
1 | <p class="under-line03"><b>background画像を使ってマーカー風のアンダーラインを引く</b></p> |
14 | background-color: #ffde00; |
全DEMO
マーカー風のラインを引く場合の注意点
アンダーラインを引いたテキストは基本「display: inline;」にしないと改行時に【3】と同現象が起きてしまいますので、注意が必要です。
※「inline-block」「block」どちらもレイアウトが崩れます。
もし改行しないテキストで「display:block;」を指定した場合、【1】のグラデーションでやる場合は「line-height」で行間を調整すると、アンダーラインの高さも調整できます。
基本、グラデーションでやるのが一般的ですが、高さを自分で調整できるbackground画像を使うほうが個人的には好きですかね？
今回は、以上です。
