Все мы знаем стандартное подчеркивание, здесь узнаете еще об одном варианте, который заключается в том, что при наведение на ссылку или ключевое слово, подчеркивание начинается по центру внизу знака, и идет по обоим сторонам. Так что вы можете здесь задать в CSS скорость и безусловно ширину горизонтальной линий.
Первое, что нам нужно сделать, это отключить text-decoration и установить ссылку positionна relative. Для упрощения, мы также позаботимся о том, чтобы ссылка не меняла цвет при наведении курсора.
Для начала HTML
Код
<a href="/" class="danikaton-devansokem">Наведи на меня клик</a>
CSS
Код
.danikaton-devansokem {
position: relative;
color: #0c2b5a;
text-decoration: none;
font-size: 30px;
display:inline-block;
}
.danikaton-devansokem:hover {
color: #0c2b5a;
}
Далее мы хотим добавить границу и скрыть ее с помощью преобразования. В качестве запасного варианта мы скрываем это visibility: hidden для браузеров, которые не поддерживают CSS-анимацию.
Код
.danikaton-devansokem:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #0c2b5a;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
В самом низу мы говорим элементу анимировать все изменения, примененные к нему, с продолжительностью в 0.3 секунды. Чтобы анимация появилась, теперь нам нужно снова сделать элемент видимым hover и установить его масштаб.
Код
.danikaton-devansokem:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
И это все!
Демонстрация
