CSSで実装する文字に線をつけるホバーエフェクトまとめ

2020.12.10
HTML&CSS

リンクのテキストにカーソルをマウスオーバーした際に、文字に線を引くホバーエフェクトのサンプルをまとめてみました。

フェードインで下線をつける

SAMPLE

<a href="#">SAMPLE</a>

a {
  position: relative;
  display: inline-block;
}
a::after {
  position: absolute;
  bottom: .3em;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background-color: #333;
  opacity: 0;
  transition: .3s;
}
a:hover::after {
  bottom: 0;
  opacity: 1;
}

<a>タグでリンクにしたテキストには、デフォルトで下線がつきますが、そのままでは下線だけ個別に色を変えるなどデザインの変更ができないため、新たに擬似要素afterで下線を作ります。

作成した線は、positionで配置して、opacityで透過して非表示にしておきます。ホバー時は、位置を上に指定し、透過の値を「1」にすることで下からフェードして表示されます。フェードの速度はtransitionで指定しています。

線は、heightで太さ、background-colorで色を変更できます。

SAMPLE

左から下線を引く

ホバーすると左から右へ下線が引かれるエフェクトです。

SAMPLE

<a href="#">SAMPLE</a>

a {
  position: relative;
  display: inline-block;
}
a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: #333;
  transition: .3s;
}
a:hover::after {
  width: 100%;
}

擬似要素で作成した線の長さ（width）を、「0」から「100%」に変更することで、線を引くエフェクトを実装しています。

中央から左右へ下線を引く

中央から左右に半分ずつ線が伸びるエフェクトです。

SAMPLE

<a href="#">SAMPLE</a>

a {
  position: relative;
  display: inline-block;
}
a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 1px;
  background-color: #333;
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
a:hover::after {
  width: 100%;
}

左から線を引く時と同様に、線の長さを「0」から「100%」に変更することで線を伸ばしています。今回は線の位置（left）を予め「50%」（テキストの中央）にしておき、ホバー時に通常の位置にずらすことで、線が中央から左右に伸びているようなエフェクトにしています。

上下に左右から線を引く

下だけでなく、上にも線を引くエフェクトです。

SAMPLE

<a href="#">SAMPLE</a>

a {
  position: relative;
  display: inline-block;
}
a::before,
a::after {
  position: absolute;
  content: '';
  width: 0;
  height: 1px;
  background-color: #333;
  transition: .3s;
}
a::before {
  top: 0;
  left: 0;
}
a::after {
  bottom: 0;
  right: 0;
}
a:hover::before,
a:hover::after {
  width: 100%;
}

上の線はもう一つの擬似要素beforeで作っています。beforeは表示位置を「top、left」で指定することで上線を左から右へ、afterは表示位置を「bottom、right」で指定することで下線を右から左へ線を引いています。

上下に中央から線を引く

上下の線をそれぞれ中央から左右に伸ばすエフェクトです。

SAMPLE

<a href="#">SAMPLE</a>

a {
  position: relative;
  display: inline-block;
}
a::before,
a::after {
  position: absolute;
  left: 50%;
  content: '';
  width: 0;
  height: 1px;
  background-color: #333;
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
a::before {
  top: 0;
}
a::after {
  bottom: 0;
}
a:hover::before,
a:hover::after {
  width: 100%;
}

文字と線の色を変える

ホバー時に線を入れると同時に文字の色を変えるエフェクトです。

SAMPLE

<a href="#">SAMPLE</a>

a {
  position: relative;
  display: inline-block;
  transition: .3s;
}
a:hover {
  color: #13c3ac;
}
a::after {
  position: absolute;
  bottom: .3em;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background-color: #333;
  opacity: 0;
  transition: .3s;
}
a:hover::after {
  bottom: 0;
  background-color: #13c3ac;
  opacity: 1;
}

文字の色も同時にかえる場合は、擬似要素だけでなく<a>タグにもtransitionを設定します。

擬似要素を使って線を実装するテクニックは、線を引くエフェクト以外でも応用が効きそうです。