Tech

【CSS】ホバー下線の実装

公開
Tech HTML/CSS

はじめに

ヘッダーやフッターメニューでホバー時に下線が左から右へ伸びるアニメーションをよく見かけるかと思うのですが、他の装飾ですでに擬似要素を両方使ってしまっていて困ったので、擬似要素が使えない場合と使える場合の実装パターンを紹介します！

共通HTML

<a href="#" class="hover-link">ここをホバー</a>

擬似要素が使える場合

::afterを配置し、transform: scaleX()で伸縮させます。

CSS

.hover-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #333;
}

.hover-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #333; /* 下線の色を指定 */
  transform: scaleX(0);
  transform-origin: left; /* 左端を起点に伸びる */
  transition: transform 0.3s ease;
}

.hover-link:hover::after {
  transform: scaleX(1);
}

擬似要素が使えない場合

要素の::beforeと::afterが埋まっている場合は、背景画像（background）の幅をコントロールして下線を描画します。

CSS

.hover-link {
  display: inline-block;
  text-decoration: none;
  color: #333;
  /* #333 の部分で下線の色を指定 */
  padding-bottom: 4px; /* ← これで文字と線の間に少し余白ができる */
  background: linear-gradient(to top, #333 2px, transparent 99%) no-repeat;
  background-position: 0% 100%; /* 左下起点 */
  background-size: 0% 2px; /* 初期状態は幅0 */
  transition: background-size 0.3s ease;
}

.hover-link:hover {
  background-size: 100% 2px; /* ホバーで幅100%へ伸びる */
}

ポイント
背景画像として下線を描画しているため、そのまま書くと文字の真下ぴったりにくっつきます。
少し余裕が欲しい時は、padding-bottomで調整してください。

（すでに line-height で十分な隙間がある場合は padding-bottom は不要です。）

おわりに

擬似要素が使えなくても安心ですね。似たような場面で困った時は、ぜひ試してみてください！

他のCSSのおすすめ記事はこちら

【CSS】mix-blend-modeとbackdrop-filter（blur）を両立させる実装パターン

はじめに Webサイトのヘッダーなどで、「背景色に合わせて文字色を反転させつつ（mix-blend-mode: difference）、背景にはすりガラスのようなぼかし（backdrop-filter: blur）を入れたい」と思ったことはありませんか？ 弊社コーポレートサイトのヘッダーを実装する際、まさにこの両方を適用しようとしたのですが、ある問題に直面しました。 今回は、この