Css 鼠标悬停时将字体图标向右移动

我正在努力实现以下目标：

<div class="cta-button">
  <a href="my-link">My link</a>
</div>

当我用5px增加左边距时（因为我想让font awesome图标在悬停时向右移动），a标记中的文本会被推到左边

我对按钮元素使用了相同的SCS，它可以完美地工作

任何帮助都将不胜感激

---

提前多谢

您是否尝试过使用transform属性而不是margin

transform: translateX(5px);

如果您以前没有使用过转换，那么CSS技巧中的博客文章非常好：

---

您需要添加浏览器前缀以获得支持。

改用translate仅移动图标

transform: translateX(5px);

.cta-button a {
  background: $yellow;
  border-radius: 10px;
  padding: 20px;
  @include sans-p3-black;
  @include link_reset;
  transition: all 0.3s ease;
    &:after {
      @include fa('\f178');
      margin-left: 10px;
      color: $white;
      transition: all 0.3s ease;
    }
    &:hover {
      &:after {
        transform: translateX(5px);
      }
    }
}