アンダーラインとは

アンダーラインとは強調させたいテキストの下部に線を引くテクニックです。

HTMLではアンダーラインを引く方法が複数あるので、用途に合わせて使い分けましょう。

共通HTML

<div>
  <p>全体の文章で<span class="underline">この部分だけ</span>アンダーラインを引く</p>
</div>

text-decoration

text-decorationは最も基本的なアンダーラインの設置方法です。

指定したテキストのすぐ下に実線（直線）が引かれます。

線の色は指定しているテキストと同じ色になりますが、太さや種類は変更できません。

CSS

.underline {
  text-decoration: underline;
}

実装

See the Pen underline1 by DREAM NET WORKS (@dnw) on CodePen.

border-bottom

border-bottomはtext-decorationと違い、文字と線の間（余白）を空けたり、線の太さ、種類、色を変更する事ができます。

今回はtext-decorationとの違いを分かりやすくするため、以下の設定にしました。

文字と線の間：5px

線の太さ：2px

線の種類：破線（dashed）

線の色：水色（#0bd）

CSS

.underline{
  /* 罫線を下側にだけ設置する */
  /* 線の太さ、種類、色が変更可能 */
  /* 太さ：2px 種類：破線（dashed） 色：水色（#0bd） */
  border-bottom: 1px dashed #0bd;
  /* padding-bottomを設置する事により文字とラインの隙間を調整可能 */
  padding-bottom: 5px;
}

実装

See the Pen underline2 by DREAM NET WORKS (@dnw) on CodePen.

background: linear-gradient

背景にグラデーションを設定し、アンダーラインを引く方法です。

今回は蛍光ペンで引いたようアンダーラインを再現してみました。

CSS

.underline{
  /* 背景にグラデーションを設定し、上半分を透明（transparent）、下半分に色を付ける */
  background: linear-gradient(transparent 50%, #0bd 50%);
}

実装

See the Pen underline3 by DREAM NET WORKS (@dnw) on CodePen.