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

Ниже представлен CSS-код, который создает эффект подчеркивания при наведении на элемент:

selector::after {
  content: '';
  position: relative;
  top: 0%;
  display: block;
  height: 3px; 
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}

selector:hover::after {
  width: 100%;
  background: #000; 
}

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

Как это работает

Селектор hover: Когда курсор наводится на элемент, ширина линии увеличивается до 100%, и цвет фона устанавливается в черный.

Псевдоэлемент ::after: Этот элемент создается после содержимого выбранного элемента и используется для отображения линии подчеркивания.

Свойство transition: Оно позволяет анимировать изменения ширины и цвета фона линии, что создает плавный эффект.

Заключение

Эффект плавного подчеркивания текста при наведении не только улучшает визуальную привлекательность вашего сайта, но и делает его более интерактивным для пользователей. Используя псевдоэлементы и CSS-переходы, можно легко настроить этот эффект для различных элементов на странице.