Как навести текст с помощью анимированной иконки

Question

Мне действительно нужна помощь. У меня проблемы с наведением кнопки Prev. Я хочу, чтобы эта кнопка переворачивалась с анимированной иконкой. Тем не менее, теперь он переносит только анимированный значок, а не текст. Вот скриншот кнопки, HTML и CSS кода ниже. Спасибо!

Состояние кнопки сейчас https://vimeo.com/394493039

.link2 {
  color: #000;
  cursor: pointer;
  font-weight: 400;
  text-decoration: none;
}

.link--arrowed2 {
  color: #000;
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
}
.link--arrowed2 .arrow-icon2 {
  position: relative;
  top: -1px;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  vertical-align: middle;
}
.link--arrowed2 .arrow-icon--circle2 {
  color: #000;  
  -webkit-transition: stroke-dashoffset 0.3s ease;
  transition: stroke-dashoffset 0.3s ease;
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
}
.link--arrowed2:hover .arrow-icon2 {
    color: #000;
  -webkit-transform: translate3d(-5px, 0, 0);
          transform: translate3d(-5px, 0, 0);
}
.link--arrowed2:hover .arrow-icon--circle2 {
    color: #000;
  stroke-dashoffset: 0;
}

<div grid-row="" grid-pad="1.5" grid-gutter="3" class=""><div grid-col="x11" grid-pad="1.5"><small>
<a class="link link--arrowed2" href="#" rel="prev_page">
    <svg class="arrow-icon2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
      <g fill="none" stroke="#000000" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
        <circle class="arrow-icon--circle2" cx="16" cy="16" r="15.12"></circle>
        <path class="arrow-icon--arrow2" d="M18.00 23.00L10.0 16l7.00 -7.00M9.23 16h13.98"></path>
      </g>
    </svg></a><a href="#" rel="prev_page"></a><a class="link link--arrowed2" href="#" rel="prev_page"> Prev Project</a></small></div>

Answer 1

Вы используете слишком много тегов a в вашем html. Вам нужен только один тег привязки для каждой ссылки.

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

.link2 {
  color: #000;
  cursor: pointer;
  font-weight: 400;
  text-decoration: none;
}

.link--arrowed2 {
  color: #000;
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
}

.link--arrowed2 .arrow-icon2 {
  position: relative;
  top: -1px;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  vertical-align: middle;
}

.link--arrowed2 .arrow-icon--circle2 {
  color: #000;
  -webkit-transition: stroke-dashoffset 0.3s ease;
  transition: stroke-dashoffset 0.3s ease;
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
}

.link--arrowed2:hover .arrow-icon2 {
  color: #000;
  -webkit-transform: translate3d(-5px, 0, 0);
  transform: translate3d(-5px, 0, 0);
}

.link--arrowed2:hover .arrow-icon--circle2 {
  color: #000;
  stroke-dashoffset: 0;
}

<div grid-row="" grid-pad="1.5" grid-gutter="3" class="">
  <div grid-col="x11" grid-pad="1.5">
    <small>
      <a class="link link--arrowed2" href="#" rel="prev_page">
        <svg class="arrow-icon2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
          <g fill="none" stroke="#000000" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
            <circle class="arrow-icon--circle2" cx="16" cy="16" r="15.12"></circle>
            <path class="arrow-icon--arrow2" d="M18.00 23.00L10.0 16l7.00 -7.00M9.23 16h13.98"></path>
          </g>
        </svg>
        <span>Prev Project</span>
      </a>
    </small>
  </div>
</div>