我想在链接列表中的每个链接之前添加 Font Awesome 图标，然后通过在链接悬停时将其向右移动来仅为图标设置动画

问题描述

我只希望右箭头（Awesome 字体图标“\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,.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>

解决方法

使用 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,.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>

font-awesome-5 html transition transition