Анимация подчеркивания при наведения курсора

Рейтинг: 1Ответов: 1Опубликовано: 27.02.2023

как сделать так, чтобы до наведения курсора подчеркивание тоже было

пример: www.studiorhe.com

a {
  color: black;
  position: relative;
  cursor: pointer;
}

a:after {
  border: none;
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: black;
  transition: width 0.5s;
}

a:hover:before {
  border-bottom: 1px solid black;
}

a:hover:after {
  border: none;
  content: "";
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  background-color: black;
  transition: width 0.5s;
}
<a href='#'>Пример ссылки</a>

css-animation
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Анимация перехода выполнена с изменяемой задержкой, с помощью transform и scaleX:

a {
  position: relative;
  text-decoration: none;
  color: black;
}

a::before,
a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  border-bottom: 1px solid black;
  background-color: black;
  transition: transform .75s cubic-bezier(.19, 1, .22, 1);
}

a::before {
  transform-origin: left;
  transform: scaleX(0); transition-delay: 0s;
}
a:hover::before {
  transform: scaleX(1); transition-delay: .25s;
}

a::after {
  transform-origin: right;
  transform: scaleX(1); transition-delay: .25s;
}
a:hover::after {
  transform: scaleX(0); transition-delay: 0s;
}
<a href='#'>Пример ссылки</a>