StillMaster » Веб разработка » HTML » Как сделать плавное подчеркивание ссылки снизу полосой с градиентом при наведении мыши?

Как сделать плавное подчеркивание ссылки снизу полосой с градиентом при наведении мыши?
Как сделать плавное подчеркивание ссылки снизу полосой с градиентом при наведении мыши?

Работая с одним из заказов появилась задача подчеркнуть ссылки полосой с градиентом при наведении мыши, но не просто подчеркнуть, а чтобы полоса плавно появлялась. В этой статье ответ как при наведении мыши сделать плавное подчеркивание полосой с градиентом.

 

Для создания плавного подчеркивания ссылки снизу полосой с градиентом при наведении мыши, можно использовать 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.

Вот и получившийся результат, конечно оформление самое простое, но суть в общем я написал, а если вам нужно конкретное решение пишите помогу.

Ссылка Ссылка Ссылка


Skypro

Если вам была полезна данная статья, то поделитесь данной статьей в социальной сети. А если вам нужна помощь в настройке сайта, нужна верстка или что то еще то жду Вас на kwork .


Поделиться:

82 22.11.23