マウスホバーで背景が伸びるリンク

See the Pen Untitled by チータツ ＠ブログについて語る (@cheese_fuji) on CodePen.

CSSの解説

<a href="#">背景が左から伸びる</a>

a{
  position: relative; /*疑似要素配置のため*/
  text-decoration: none;
  color: inherit;
  transition: .3s;
  padding: .5em;
}
a:after{
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  background: #faa755;
  width: 0; /*初期状態は幅0*/
  height: 100%;
  transition: .3s;
  z-index: -1; /*リンク(文字)の後ろに配置する*/
}
a:hover{
  color: white;
}
a:hover:after{
  width: 100%; /*ホバー時に幅を100%に*/
}

• リンクaにposition: relativeを指定
• リンクの疑似要素:afterを作成する
  • position: absoluteで絶対値で配置
  • z-index: -1で文字の後ろに配置
  • 標準状態ではwidth: 0にしておく
• マウスホバー時の疑似要素a:hover:afterをwidth: 100%にして背景を伸ばす

疑似要素にz-index: -1を指定しておかないと、背景で文字まで塗りつぶされてしまうので注意。また、濃い色を使う場合は、サンプルと同じようにホバー時に文字色をcolorで白色にするのがおすすめです。

応用CSS

透明度を使って自然に

透明度を変化させるopacityを追加するだけで、背景の出現をより自然にすることができます。

ただその分「伸びている」感じが弱くなるので、好みに合わせて使い分けてください。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

右から背景が伸びる

左←右 に背景が伸びるバージョンです。
人の視線の動きには反しているので、使いどころはよく考えましょう。

最初から width:100%; の背景を作っておき、transform: scaleX() によるアニメーションでサイズを変更します。

See the Pen Untitled by チータツ ＠ブログについて語る (@cheese_fuji) on CodePen.

中央から背景が伸びる

transform-origin でアニメーションの開始点を指定しなかった場合は、初期値である中央を始点として背景が伸びます。

See the Pen Untitled by チータツ ＠ブログについて語る (@cheese_fuji) on CodePen.

センターに円系の背景

疑似要素に border-radius: 50%; を指定すれば、丸い背景を出現させることも可能です。

汎用性は高くないですが、いざという時には使えるかもしれません。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

おすすめの使い方

• 本文中の重要なリンク
• ボタン
• ヘッダーメニュー