Работая с одним из заказов появилась задача подчеркнуть ссылки полосой с градиентом при наведении мыши, но не просто подчеркнуть, а чтобы полоса плавно появлялась. В этой статье ответ как при наведении мыши сделать плавное подчеркивание полосой с градиентом.
Для создания плавного подчеркивания ссылки снизу полосой с градиентом при наведении мыши, можно использовать CSS-анимацию и псевдоэлемент ::before
Вот пример кода
HTML:
<a href="#" class="link">Ссылка</a>
<a href="#" class="link">Ссылка</a>
<a href="#" class="link">Ссылка</a>CSS:
.link {
position: relative;
display: inline-block;
}
.link::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-image: linear-gradient(to right, #000, #fff);
transition: width 0.3s ease-in-out;
transform: translateX(-50%);
}
.link:hover::before {
width: 100%;
}В этом примере мы создаем ссылку с классом link. При наведении на ссылку, мы добавляем псевдоэлемент::before, который создает полосу с градиентом. При наведении мыши на ссылку, ширина псевдоэлемента увеличивается до 100%, что приводит к плавному подчеркиванию ссылки снизу полосой с градиентом.
Обратите внимание, что в этом примере мы используем linear-gradient для создания градиента. Вы можете изменить градиент, используя другие значения для свойства background-image.
Вот и получившийся результат, конечно оформление самое простое, но суть в общем я написал, а если вам нужно конкретное решение пишите помогу.
Если вам была полезна данная статья, то поделитесь данной статьей в социальной сети. А если вам нужна помощь в настройке сайта, нужна верстка или что то еще то жду Вас на kwork .
