Плавное подчеркивание ссылки при наведении на чистом 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). Пробуйте!
У нас на канале есть видео на эту тему, советуем посмотреть, если остались вопросы.