hover時にリンクテキスト下の白線がゆっくり浮かび上がってくるようにしたい。

Question

transitionプロパティを使って以下のgif画像のようなエフェクトをつけたいのですが、どのような記述で出来ますでしょうか？

Answer 1

こんな書き方もできます。
必要に応じてクラス分けや色の変更をしてください。

<a href="#" >テキスト</a>

a{
  text-decoration: none;
  position: relative;
  display: inline-block;
}
a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%; /* テキストいっぱいに */
  height: 2px; /* 2pxの高さで */
  background: #000; /* #000の色の背景色（ボーダーの代わり） */
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
a:hover::after {
  opacity: 1;
  visibility: visible;
}

Answer 2

透明なborderを予め設定しておくと良いです

Comments

[liveasnotes]

・currentColorは色を継承することを意味します
・rgba()は，RGBの色指定に透過レベルの情報を追加できる色指定です
・:visitedを書いているのは，リンクを踏まれた後の色が勝手に変化しないようにするためです

Answer 3

transition-duration:(秒数)s;
で変化にかける時間を指定できます
transition-timing-function
で変化具合(最初は早く、終わり際は遅く　など)を設定できます

Comments

[hajini10]

実はその記述は試してみたのですが、どうしても上から下にかけて少しずつ表示されていくエフェクトにしかなりません。アンダーライン全体が徐々にフェードインするようにする為にはどうすればいいでしょうか？