マウスホバー時にラインマーカーを引くようなアニメーションをCSSで表現してみる

今回はポップな小技をメモ。
以下のように、マウスホバー時にテキストにラインマーカーを引くようなアニメーションを表現してみます。

手順１：HTML側でマーカーを引きたいテキストをspanタグで囲む

まずは、CSSを適用させるために、マーカーを引きたい部分をspanタグで囲みます。このとき、好きなクラス名をつけてください。

今回の例では、"marker"というクラス名をつけるものとします。

手順２：CSS側でマーカー線を擬似要素で表現する

::beforeまたは::after擬似要素を使用します。

CSSのコード

.marker{
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.marker::after{
  content:"";
  width: 0%;    /*最初はwidth:0にする*/
  height: 8px;
  background: #ffb580;
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: -1;
  transition: all .3s;  /*アニメーションの長さ*/
}	
.marker:hover::after{
  width: 100%;    /*hover時に100%で広がる*/
}

.markerクラスのついたspanタグ本体のpositionプロパティはrelativeに、擬似要素のpositionプロパティをabsoluteにしてテキスト下部へと配置します。

擬似要素のz−indexプロパティをマイナス側へ調整してテキストの後ろにマーカーを回り込ませ、可読性をキープするのを忘れないようにしましょう。

この時、親であるspanタグのz-indexを1以上の値にすることに注意してください。z-indexを指定しなければ、マーカーとなる擬似要素がbody要素の下に埋もれてしまい、表示されないことがあります。

マーカーの色はbackgroundプロパティで指定しましょう。

hoverさせる前にwidthプロパティを0%にしておき、:hover擬似クラスを利用してマウスホバー時にwidthプロパティを100％へと広げると、ラインマーカーを引くようなアニメーションの完成です！