» »

Стильный эффект подчёркивания ссылки CSS


Стильный эффект подчёркивания ссылки CSS

Все мы привыкли к стандартному подчеркиванию, когда наводим на ссылку. Здесь будет совершенно по другому, а с право налево красиво выезжать под ссылкой. И все сделано только на стилях CSS, что характерно небольшой по объему, и если вы поставите ссылку и наведете, то сразу сработает анимационный эффект, который будет безусловно замечен.

Как работает:

Код
<a href="#">ссылка</a>


Только в этом случай будет срабатывать, а если понять, что основном на всех сайтах так прописано, то только остается в CSSS прописать.

Код
a {  
  text-decoration: none;  
  position: relative;  
  color: #3366FF;  
}  
a:after {  
  content: '';  
  position: absolute;  
  bottom: 0;  
  left: 0;  
  width: 0%;  
  border-bottom: 2px solid #3366FF;  
  transition: 0.4s;  
}  
a:hover:after {  
  width: 100%;  
}


Как видим, мы еще можем выставить и сам оттенок цвета. Также все можете посмотреть на демонстраций и понять как все будет происходить.

29.04.2016 Просмотров: 353 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
feliksteg
feliksteg 29.04.2016 16:591
0
Тут бы главное внутренние ссылки бы непоказывало, а так смотрится очень даже хорошо.
Kosten
Kosten 29.04.2016 17:142
0
Ставил на тестовом и не заметил, чтоб где то не там появлялся этот эффект, где нужно там был.
avatar