擬似クラス「:hover」でアンダーライン（アニメーション初級）を入れる - レクチャーサイト

04擬似クラス「:hover」でアンダーライン（アニメーション初級）を入れる

詳細はこちら

アンダーラインを左から右に伸ばす

詳細はこちら

transition-timing-function: ease; | 開始時と終了時にはゆっくり変化（初期値）

transition-timing-function: ease-in; | 開始時はゆっくり変化し、終了時は早く変化

transition-timing-function: linear; | 速度が変わることなく一定に変化

-- アニメーション --
.**********::before {
  opacity: 0;
  transition: 1s;
}
.**********:hover::before {
  opacity: 1;
}

-- アンダーラインを左から右に伸ばす --
.**********::before {
  width: 0;
  transition: 1s;
}
.**********:hover::before {
  width: 100%;
}