Transition is not affecting a child element on hover-CodePudding

I made an <a> which on hover the arrow beside it should move 20px to the right with a transition of 1s. Unfortunately, transition is failing to target the arrow. I don't why is that. Please help me guys.

HTML

<a>Register now<i ></i></a>

CSS

a{
  transition: padding-left 1s;
}

a:hover{
  text-decoration: underline;
}

a:hover i{
  padding-left: 20px;
}

CodePudding user response：

You should add the transition: padding-left 1s; to the i, not the a itself as follows:

a{
  transition: padding-left 1s;
}

a i {
  transition: padding-left 1s;
}

a:hover{
  text-decoration: underline;
}

a:hover i{
  padding-left: 20px;
}

<a>Register now<i ><span style="width:10px;height:10px;background:black;display:inline-block"/></i></a>

*edit: added a span inside the for demonstration since you don't provide the fa-solid fa-chevron-right stylings.