【CSS】下線を疑似要素afterとspanタグで引く方法

Webサイト制作のコーディングをする上で避けては通れないTips。CSSの疑似要素afterとspanタグを駆使して、テキストに下線を引く方法を紹介します。

2行のテキストにも対応できますので、ぜひご活用ください。

それではさっそく見てまいりましょう！

【CSS】afterとspanタグで下線を引くサンプルコード
- 2行目のテキストに下線をつけたい場合は？
- デモ

【CSS】afterとspanタグで下線を引くサンプルコード

方法は至って簡単。

まず、下線を引きたいテキストをspanタグで囲ってあげましょう。

▼▼▼

index.html

<h2 class="Headline"><span class="Headline-isBorder">下線付き見出し</span></h2>

次に、spanタグやその疑似要素afterにスタイリングをして実装完了です。
ポイントはこちら。

spanタグにposition:relative指定
疑似要素afterはposition:absoluteでbottomの値で下線の表示位置を調整
下線はborder-bottomで表現
疑似要素afterの横幅は100%指定
他の要素との余白は、spanタグの親要素にmargin-topなどで指定

CSSは以下です。

style.css

.Headline {
/*   margin-top: 32px; */
  font-size: 32px;
}
.Headline-isBorder {
  position: relative;
  font-weight: bold;
}
.Headline-isBorder:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 5px #000;
  bottom: -10px;
  width: 100%;
}

2行目のテキストに下線をつけたい場合は？

デザイン上、2行のテキストに下線を引きたい場合がありますね。

そんなときも上記の方法で対応可能です。ただ、1行目のテキストと2行目のテキストをそれぞれspanタグで囲い、さきほどと同じようにクラスを付与してあげればOK。2つのspanタグのクラスは同じもので大丈夫です。

HTML・CSSのサンプルコードは以下。

index.html

<h2 class="Headline"><span class="Headline-isBorder">1行目のテキスト</span><br><span class="Headline-isBorder">2行目のテキスト</span></h2>

1行のテキストと異なる点は、spanタグの親要素にline-heightを指定しているところです。それをしないと疑似要素で作った下線とテキストが重なってしまうのでご注意を。

style.css

.Headline {
  line-height: 2;/*これがないと下線がテキストに重なってしまう*/
  font-size: 32px;
}
.Headline-isBorder {
  position: relative;
  font-weight: bold;
}
.Headline-isBorder:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 5px #000;
  bottom: -10px;
  width: 100%;
}