Как прикрутить анимацию к навигации?

Question

[Сергей Ильин]

Здравствуйте.
Интересующий эффект - https://codepen.io/davidicus/pen/emgQKJ
(выворотка при наведении на Twitter)
за эффект отвечает, видимо

p {
  color: #fff;
  font-size: 12px;
}

p a {
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid;
  color: #fff;
  line-height: 1.4;
  padding: .25em;
  text-decoration: none;
}
p a:hover {
  background: white;
  color: #E1332D;
}

Мой код - https://jsfiddle.net/sunsexsurf/gw3185to/11/
"в лоб" самому не получилось - снова прихожу к вам

Answer 1

[Ankhena]

https://jsfiddle.net/ueqm2xk7/
За анимацию отвечает свойство transition

Comments

[Сергей Ильин]

https://jsfiddle.net/sunsexsurf/gw3185to/12/

(( у меня не получилось (

Answer 2

[Lord_Dantes]

В чем проблема?

Сначало у элемента border-bottom: solid 1px #fff;
При наведении background:#fff; transition: all 300ms;

Comments

[Сергей Ильин]

то ли лыжи не едут, то ли IQ невысокий ((
https://jsfiddle.net/sunsexsurf/gw3185to/13/

[Lord_Dantes]

Сергей Ильин, там вообще у header~link нету точки обозначающей класс, CSS смотрите как пишете)

[Сергей Ильин]

s l a v e, фак. все работает. никак не привыкну к css. гигантское спасибо!