Как сделать такой эффект?

Question

[Grizzy]

Часто видел на сайтах эффект, когда при наведении на ссылку нижняя полоска как бы рисуется. Т.е. полоска плавно проводится по ссылкой. как такое сделать...?:)

Answer 1

[Serj-One]

<div class="example"></div>

.example {
  width: 300px;
  height: 50px;
  background: yellow;
  cursor: pointer;
  position: relative;

  margin: 50px auto;
}
.example:before {
  content: '';
  display: block;
  width: 0;
  height: 5px;
  background: red;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: .5s;
}
.example:hover:before {
  width: 100%;
}

codepen.io/anon/pen/vLarpB

Comments

[Grizzy]

Оно!

[Павел Алмазов]

Разъясните пожалуйста что делает знак "&" в этом коде

[Serj-One]

Павел Алмазов: Это SCSS. Знак & - Ссылка на родителя селектора. Чтоб посмотреть css можешь перейти в приложенный пен, и нажать на вкладке css "view compilled".

[Serj-One]

Павел Алмазов: Заменил код на css, чтоб больше это никого не смущало.

[Павел Алмазов]

Serj-One: Спасибо, не знал что так можно сокращать код.

Answer 2

[make_dev]

Вот уже готовые решения. Можно подогнать для своих целей.
Вот 1 вариант.
Эффект №10, на синем фоне
Вот 2 вариант.
Эффект №3 Surinami