Плавное подчеркивание ссылки при наведении на чистом CSS
В это статье я расскажу, как можно сделать плавное подчеркивание ссылки на ховере. Все будет реализовано на css, без использования сторонних библиотек.
Предположим, у вас есть ссылка:
<a href="#">Как сделать плавное подчеркивание</a>
По умолчанию, это обычная ссылка, стили для которой задает браузер. Давайте это исправим.
Наш план заключается в том, что с помощью псевдоэлемента :before мы создадим линию, которая будет располагаться чуть ниже ссылки. И этой линией мы и будем в дальнейшем управлять.
Добавим вот такие стили:
a {
position: relative;
color: #484848;
font-size: 1.25rem;
text-decoration: none;
}
a::before {
content: '';
position: absolute;
left: 0; bottom: -5px;
width: 100%;
height: 1.5px;
background-color: red;
}
У вас должна была появиться красная линия под ссылкой. Это и есть наш псевдоэлемент before.
Изменим ширину этой линии. Вместо 100% зададим 0 — то есть, ее теперь не будет видно.
А затем, когда пользователь будет наводить курсор на ссылку, мы будем менять свойство width у нашего псевдоэлемента. Давайте, пропишем это:
a:hover:before {
width: 100%;
}
Итак, при наведении на ссылку появляется наша линия. Давайте зададим плавность — укажем какое свойство мы будем менять и пропишем время перехода.
a::before {
transition: width 0.35s;
}
Здесь мы указали, что переход состояния width с нуля до 100% будет длиться 0.35 секунд.
Итак, итоговый код выглядит следующим образом:
Я показал принцип, по которому можно создавать плавное подчеркивание. Вы можете экспериментировать и менять значения. Или менять свойства. Например, вместо того, чтобы менять width с нуля до 100% поставьте значение width: 100%, но задайте, например, transform: scaleX(0), а при наведении меняйте его на scaleX(1). Пробуйте!
У нас на канале есть видео на эту тему, советуем посмотреть, если остались вопросы.
Не работает, тег hover:before ничего не происходит:
.About {
text-decoration: none !important;
font-size: 30px;
font-family: «Lato»;
color: rgb(57, 57, 57);
font-weight: bold;
line-height: 1.2;
text-align: left;
position: absolute;
left: 830.906px;
top: 52px;
z-index: 8;
}
.About::before {
content: »;
position: absolute;
left: 0; bottom: -5px;
width: 0%;
height: 2.5px;
background-color: #575757;
}
.About:hover:before {
width 100%!important;
}
vse, razobrlaysa tam ne bilo : v width v konce