【CSS】アンダーラインの引き方まとめ

はじめに
- この記事の概要
- 対象読者
アンダーラインを引く方法3線
さいごに

はじめに

この記事の概要

こんちには、株式会社TOKOSのたくまです！
みなさんはコーディング中、文字にアンダーラインを引く際はどのように記述していますか？

おそらくborder-bottom を使用する方が多いかと思います。
border-bottomを使用することで簡単にアンダーラインを引くことは出来ますが、
カスタマイズ性が乏しいため、場合によってはデザインに寄せることが難しいかもしれません、、
実際にアンダーラインを実装するにあたって以下のような悩みを抱えたことはありませんか？

たくま

複数行にまたがる下線を引きたいなぁ

たくま

2色に分かれた下線を引きたいなぁ

そこで今回は、border-bottomを使用する以外にもCSSでアンダーラインを引く方法についてご紹介します！

対象読者

CSSを勉強中の初学者の方
CSSでアンダーラインを引きたい方

アンダーラインを引く方法3線

①border-bottomを使用する

まずは冒頭でもお話したborder-bottomを使用する方法について改めてご紹介します！
今回は下のようなテキストにアンダーラインを引いていきます。

コードはこちらになります。

<div class="box">
  <p class="text">
    ここに下線を引きます
  </p>
</div>

.box {
  width: 400px;
  height: 300px;
  padding: 200px 0;
  background-color: #fff5e6;
}

.text {
  text-align: center;
  width: fit-content;
  margin: 0 auto;
}

早速アンダーラインを引いていきましょう！
上記の.textにborder-bottomを追加します。

.box {
  width: 400px;
  height: 300px;
  padding: 200px 0;
  background-color: #fff5e6;
}

.text {
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  border-bottom: solid 1px red;
}

すると、下のような線が引かれます。

border-bottomを使用する際は、線の種類・太さ・色を指定することで下線のスタイルを変更できます。
今回は線の種類をsolid、太さを1px、色をredにしました。
線の種類はsolidの他にdashed(破線)、dotted(点線)など様々な種類があるので、必要に応じて使い分けてみて下さい！
border-bottomの詳しい仕様については以下のサイトが参考になります。

参考border-bottom – CSS: カスケーディングスタイルシート | MDNnull

1点注意して頂きたいのは、border-bottomを使用する際、アンダーラインの長さは要素のwidthに依存するので、
テキストにのみアンダーラインを引きたい場合はwidth: fit-content;を指定するようにして下さい。
実際にwidth: fit-content;を外すと下のようなアンダーラインになります。

②backgroundを使用する

続いてはbackgroudを使用する方法です！
backgroundを使用することで、蛍光ペンのようなラインを引けたり、複数行にまたがる線を引くことが出来ます！

実際に記述していきます。

.box {
  width: 400px;
  height: 300px;
  padding: 200px 0;
  background-color: #fff5e6;
}

.text {
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  background: linear-gradient(transparent 48%, red 90%);
}

上記の記述で次のような表示になります。

今回は赤い蛍光ペンをイメージしました！
backgroundを使用する際はtransparentの%で線の太さ、色の後の%でかすれ具合を調整しています。
記述は異常なので、border-bottomと同様に簡単に使用することが出来るかと思います。
複数行にまたがる線を引きたい場合は、テキストをspanタグで囲みます。

<div class="box">
  <span class="text">
    ここに下線を引きます
    <br>
    複数行にまたがります
  </span>
</div>

そして、テキストを真ん中に寄せるため、親要素である.boxにtext-align: center;を指定します。

.box {
  width: 400px;
  height: 300px;
  padding: 200px 0;
  background-color: #fff5e6;
  text-align: center;
}

.text {
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  background: linear-gradient(transparent 48%, red 90%);
}

これで下のような線を引くことが出来ます。

線の太さなどのスタイルは適宜、調整してみて下さい！

③疑似要素を使用する

最後は疑似要素を使用する方法です！
こちらが1番カスタマイズ性は高いと思います。

疑似要素を使用するための下準備として、.textにposition: relative;を追記しましょう。

.box {
  width: 400px;
  height: 300px;
  padding: 200px 0;
  background-color: #fff5e6;
  position: relative;
}

.text {
  text-align: center;
  width: fit-content;
  margin: 0 auto;
}

続いて.textにafterを使用して疑似要素を追加していきます。
今回は2色のアンダーラインを作成します。

.box {
  width: 400px;
  height: 300px;
  padding: 200px 0;
  background-color: #fff5e6;
  position: relative;
}

.text {
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  border-bottom: solid 2px red;
}

.text::after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 2px pink;
  bottom: -2px;
  width: 30%;
}

このように記述することで、下のようなピンクと赤の2色のアンダーラインが表示されます。

こちらのアンダーラインは手軽にできて、なおかつオシャレなのでおすすめです！
また、次のように記述することで角が丸くなった柔らかい印象のアンダーラインを作成することも出来ます。

.box {
  width: 400px;
  height: 300px;
  padding: 200px 0;
  background-color: #fff5e6;
  position: relative;
}

.text {
  text-align: center;
  width: fit-content;
  margin: 0 auto;
}

.text::after {
  content: "";
  position: absolute;
  bottom: -4px;
  display: inline-block;
  width: 156px;
  height: 4px;
  left: 50%;
  transform: translateX(-50%);
  background-color: red;
  border-radius: 8px;
}