CSS|hover時のアンダーラインアニメーションサンプル

IT
スポンサーリンク

最近マウスホバー時にアンダーラインをアニメーションさせるエフェクトが流行ってますね。
コピー&ペーストで利用できるものをまとめたので使ってください。

シンプルな要素でないと想定通り動かないかもです。
すでにstyle.cssに複雑なコーディングをされている場合はうまく行かないため、都度調整してあげてください。

スポンサーリンク

フェードインTop





上からフェードインしてくる下線

ホバーするとアンダーラインが上からフェードインしてきます。ホバー後はすぐに消えます。


CSS
a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
a::after {
  position: absolute;
  bottom: 2px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
a:hover::after {
  bottom: -4px;
  opacity: 1;
  visibility: visible;
}

フェードインUnder


下からフェードインしてくる下線

ホバーするとアンダーラインが下からフェードインしてきます。ホバー後はすぐに消えます。


CSS
a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
a::after {
  position: absolute;
  bottom: -8px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
a:hover::after {
  bottom: -4px;
  opacity: 1;
  visibility: visible;
}

フェードインLeft


左からフェードインしてくる下線

ホバーするとアンダーラインが左からフェードインしてきます。ホバー後はすぐに消えます。


CSS
a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
a:hover::after {
  transform: scale(1, 1);
}

フェードインRight


右からフェードインしてくる下線

ホバーするとアンダーラインが右からフェードインしてきます。ホバー後はすぐに消えます。


CSS
a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
a:hover::after {
  transform: scale(1, 1);
}

フェードインLeft、フェードアウトRight


左からフェードイン、右にフェードアウトする下線

ホバーするとアンダーラインが左からフェードインしてきます。ホバー後は右にフェードアウトします。


CSS
a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

フェードインRight、フェードアウトLeft


右からフェードイン、左にフェードアウトする下線

ホバーするとアンダーラインが右からフェードインしてきます。ホバー後は左にフェードアウトします。


CSS
a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
a:hover::after {
  transform-origin: right top;
  transform: scale(1, 1);
}

フェードインCenter


中央からフェードインする下線

ホバーするとアンダーラインが中央からからフェードインしてきます。ホバー後はすぐにフェードアウトします。


CSS
a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
a:hover::after {
  transform: scale(1, 1);
}
IT
スポンサーリンク
『ベーシックインカムでセミリタイア!』を目指す20代のブログ