鼠标悬停时Transition未作用于子元素问题求助

问题出在过渡规则的作用对象错误：你把transition属性加在了<a>元素上，但实际需要过渡的是<i>元素的padding-left属性，所以过渡效果无法触发。

修正后的代码 #

HTML（保持不变）

<a>Register now<i class="fa-solid fa-chevron-right"></i></a>

CSS

a:hover {
  text-decoration: underline;
}

i {
  /* 将过渡规则应用到箭头元素上 */
  transition: padding-left 1s;
  /* 显式声明初始padding值，确保过渡能正常触发 */
  padding-left: 0;
}

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

原理说明 #

过渡效果需要作用在目标元素的可过渡属性上：当<i>元素的padding-left从初始值0变化到悬停时的20px，过渡规则会驱动这个变化在1秒内平滑完成，实现箭头右移的动画效果。

内容的提问来源于stack exchange，提问作者gamer beast