Эффект подчеркивания при наведении на ссылку

Результат смотрите по ссылке

<ul>
  <li><a href="/">Item 1</a></li>
  <li><a href="/">Item 2</a></li>
  <li><a href="/">Item 3</a></li>
</ul>
li {
  padding: 3px 0;  
}

a {
  position: relative;
  text-decoration: none;
  color: #555;
}

a:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #555; 
  transition: all 0.5s;
}

a:hover:before {
  content: '';
  width: 100%;
}

Метки:


«

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

-->