悬停时将字体真棒图标移到右侧答案

【问题标题】：Move font-awesome icon to the right on hover悬停时将字体真棒图标移到右侧
【发布时间】：2018-09-30 12:00:15
【问题描述】：

我正在努力完成以下工作：

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

应用了以下 scss

.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 {
        margin-left: 15px;
        transition: all 0.3s ease;
      }
    }
}

当我将 margin-left 增加 5 px 时（因为我希望字体真棒图标在悬停时向右移动），a 标签中的文本被推到左边。

我对按钮元素使用相同的 scss，效果很好。

任何帮助将不胜感激。

在此先感谢

【问题讨论】：

使用翻译来只移动图标

标签： css sass

【解决方案1】：

您是否尝试过使用变换属性而不是边距？

transform: translateX(5px);

如果您以前没有使用过转换，那么来自 CSS 技巧的非常好的博文：https://css-tricks.com/almanac/properties/t/transform/

.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);
      }
    }
}

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

【讨论】：