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

2 октября 2017 | CSS

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

<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%;
}

Метки: css

---