CSSのborder-bottomプロパティで作成した下線の位置を設定する方法

2025.04.18

CSS

ここでは、CSSのborder-bottomプロパティで作成した下線の位置を設定する方法について説明していきます。

Contents

下線の位置を設定するには、padding-bottomプロパティを用います。

<span class="border-bottom">border-bottom</span>

.border-bottom {
  font-size: 24px;
  border-bottom: solid 2px black;
  transition: all 0.3s;
}
.border-bottom:hover {
  padding-bottom: 20px;
}

このように、下線を引いた要素に対して、padding-bottomプロパティを用いることで、下線の位置を設定することができます。