我想在链接列表中的每个链接之前添加 Font Awesome 图标，然后在链接悬停时将其移动到右侧，只为图标设置动画答案

【问题标题】：I want to Add Font Awesome icon before each link in of a links list then animate only the icon by moving it to the right when the link is hovered我想在链接列表中的每个链接之前添加 Font Awesome 图标，然后在链接悬停时将其移动到右侧，只为图标设置动画
【发布时间】：2021-04-05 14:13:42
【问题描述】：

我只希望右箭头（真棒字体图标'\f105'）在链接悬停时平滑地向右移动并保持文本不动。用我的代码，所有的线都向右移动，你能帮忙修复线吗，当线悬停时，只允许“右箭头”的图标向右移动。谢谢

.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>

【问题讨论】：

标签： html css transition font-awesome-5

【解决方案1】：

使用translate 代替填充。

.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>

【讨论】：