Html 我想在链接列表中的每个链接之前添加一个令人敬畏的字体图标，然后在链接悬停时将其向右移动，从而仅为图标设置动画

当链接悬停时，我只希望右箭头（很棒的字体图标“\f105”）平滑地向右移动，并保持文本不动。 使用我的代码，所有行都向右移动，请您帮助修复该行，并且仅当该行悬停时，才允许“右箭头”的图标向右移动。 多谢各位

.links block ul>li a:before{
字体系列：“字体真棒5免费”；
字号：900；
显示：内联块；
内容：'\f105'；
右侧填充：5px；
过渡：所有.2s立方贝塞尔（.7,0,3,1）；
}
.links block ul>li a:悬停：之前{
左侧填充：30px；
}
.链接列表li>a{
文字装饰：无；
}
.链接文本：悬停{
文字装饰：下划线；
}
.链接列表{
列表样式：无；
}

使用

翻译

而不是填充

.links block ul>li a:before{
字体系列：“字体真棒5免费”；
字号：900；
显示：内联块；
内容：'\f105'；
右侧填充：5px；
过渡：所有.2s立方贝塞尔（.7,0,3,1）；
}
.links block ul>li a:悬停：之前{
转换：translateX（10px）；
}
.链接列表li>a{
文字装饰：无；
}
.链接文本：悬停{
文字装饰：下划线；
}
.链接列表{
列表样式：无；
}