Question

我正在努力完成以下任务：

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

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

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

任何帮助都将不胜感激。

非常感谢提前

Answer 1

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

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

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

悬停时向右移动font-awesome图标

1 个答案: