我只想右箭头（令人敬畏的字体图标'\f105')在链接悬停时平滑地向右移动，并保持文本不移动。在我的代码中，所有的线都是向右移动的，你能不能帮我固定一下线，并且只允许“右箭头”的图标在线悬停的时候向右移动。谢谢
null
.links-block ul>li a:before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
display: inline-block;
content: '\f105';
padding-right: 5px;
transition: all .2s cubic-bezier(.7,0,.3,1);
}
.links-block ul>li a:hover:before{
padding-left: 30px ;
}
.links-list li>a {
text-decoration: none;
}
.link-text:hover {
text-decoration: underline;
}
.links-list {
list-style: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
</head>
<body>
<div class="links-block">
<ul class="links-list">
<li> <a href="https://stackoverflow.com/" > <span class="link-text">The portal</span> </a></li>
<li><a href="https://stackoverflow.com/company" > <span class="link-text"> About the company </span></a></li>
</ul>
</div>
</body>
</html>null
使用translate代替填充。
null
.links-block ul>li a:before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
display: inline-block;
content: '\f105';
padding-right: 5px;
transition: all .2s cubic-bezier(.7, 0, .3, 1);
}
.links-block ul>li a:hover:before {
transform: translateX(10px);
}
.links-list li>a {
text-decoration: none;
}
.link-text:hover {
text-decoration: underline;
}
.links-list {
list-style: none;
}<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<div class="links-block">
<ul class="links-list">
<li>
<a href="https://stackoverflow.com/"> <span class="link-text">The portal</span> </a>
</li>
<li>
<a href="https://stackoverflow.com/company"> <span class="link-text"> About the company </span></a>
</li>
</ul>
</div>