悬停动画：图标必须更接近文本，现在它的工作方式相反

Posted 2023-03-06

【中文标题】悬停动画：图标必须更接近文本，现在它的工作方式相反

【英文标题】：On hover animation: Icon must get closer to the text, right now it works the other way around

【发布时间】：2017-01-25 01:39:00

【问题描述】：

我想要什么： 在悬停时，如果“>”更靠近文本，我希望链接播放一个动画。

我有什么： 动画有效，但文本更接近“>”。我知道为什么会发生这种情况，但我不知道如何解决它。如果图标在右侧，这应该很容易。

HTML：

<a href="#">Lees Meer</a>

CSS：

a 
  color: #0079D3;
  font-weight: 700;
  text-decoration: none;


a::before 
  content: '\f054';
  display: inline-block;
  font-family: 'FontAwesome';
  font-size: 0.65rem;
  margin-right: 1rem;


a:hover 
  color: #003082;


a:hover::before 
  margin-right: 0.5rem;

【参考方案1】：

最简单的方法是将图标设置为绝对定位，在链接上为图标添加间距，然后使用left属性移动图标。

a 
    color: #0079D3;
    font-weight: 700;
    text-decoration: none;
    position: relative;
    padding: .5rem 1.5rem;


a::before 
  content: '\f054';
  display: inline-block;
  font-family: 'FontAwesome';
  font-size: 0.65rem;
  margin-right: 1rem;
  position: absolute;
  left: 0;


a:hover 
  color: #003082;


a:hover::before 
  left: 0.5rem;

<a href="#">Lees Meer</a>