Animate icon on link hover

Question

I am trying to accomplish the animated effect of the icon moving slightly to the right while the text link is being hovered. Currently the icon will display it's animation if it is being pointed directly at, but I wonder if there is a way to connect these two (text and icon).

Please consider the following code:

li {
  list-style-type: none;
}

i {
  padding-left: 10px;
}

.space {
  padding: 5px;
}

.moving-left i {
  position: relative;
  transition: transform 0.3s ease;
  transform: translateX(0px);
}

.moving-left i:hover {
 transform: translateX(10px);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">

<div>
  <ul>
    <li class="space moving-left"><a href="#">Link 1<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 2<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 3<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 4<i class="fas fa-chevron-right"></i></a></li>
  </ul>
</div>

Answer 1

Try the following code. Simply by moving to .moving-left:hover i you can tell the css to do a certain action on i after hovering the class. You almost had it.

Hope this helps!

li {
  list-style-type: none;
}

i {
  padding-left: 10px;
}

.space {
  padding: 5px;
}

.moving-left i {
  position: relative;
  transition: transform 0.3s ease;
  transform: translateX(0px);
}

.moving-left:hover i {
 transform: translateX(10px);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">

<div>
  <ul>
    <li class="space moving-left"><a href="#">Link 1<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 2<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 3<i class="fas fa-chevron-right"></i></a></li>
    <li class="space moving-left"><a href="#">Link 4<i class="fas fa-chevron-right"></i></a></li>
  </ul>
</div>