Я хочу, чтобы якорь перемещался вправо при наведении на него анимации с легкостью

Question

По сути, я хочу, чтобы якорь перемещался вправо с плавной анимацией, когда я наводил курсор на него. У меня есть «>» перед якорем, который я не хочу перемещать. Мне удалось сделать это на веб-сайте, который я сделал некоторое время назад, но потерял файлы и не помню, как это сделать. Хотел бы получить некоторую помощь.

a::before {
    content: ">";
    color: black;
}

a:hover {
    right: -2px;
}

Answer 1

Примерно так:

a::before {
  content: ">";
  color: black;
  display: inline-block;
  padding-right: 0;
  transition: all 1s ease;
}

a:hover::before {
  padding-right: 5px;
}

<a href="#">Linky</a>

Answer 2

Вам нужен правильный селектор.a:hover:before выбирает псевдоэлемент :before при наведении тега.

Предполагается, что у вас гораздо больше кода, которого здесь не хватает.

a:before {
    content: ">";
    color: black;
}

a:hover:before {
    right: -2px;
}