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

Question

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

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>

То есть вы хотите чтобы текст был подчеркнутым но при наведение анимация переигралась? — Miha, Feb 27 '23 at 12:33
www.studiorhe.com пример как на этом сайте, там ссылки с такой анимацией — Rybin, Feb 27 '23 at 12:45

score 2 · Accepted Answer · answered Feb 27 '23 at 14:52

Анимация перехода выполнена с изменяемой задержкой, с помощью 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>

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

1 Answers1