使用 CSS 翻译 <a>-tag 中的文本和 <i>-tag

Question

所以我正在制作的按钮有以下情况：

<a href="#" class="button"><i class="fas fa-angle-left"></i> Previous</a>

这可以在https://jsfiddle.net/pre3xzL5/（来自 Font Awesome 的<i>-tag）上完全看到。

基本上我希望按钮内的文本从一开始就居中（现在不是），然后当我将鼠标悬停时，箭头 (<i>-tag) 出现并从中间向左移动，并且然后下一个也应该从中间（应该居中）向右移动一点。但是，现在，下一个是从悬停时应该在的位置开始。这是有道理的，因为<i>-tag 占用了空间，但问题是：我可以纠正这个吗？

我已经使用边距来代替。但我读过使用边距进行转换等是不好的做法，对性能不利 - 因此尝试使用 translate。

Answer 1

这两个转换语句是您唯一需要的，最初设置在相关元素上。在悬停时将绝对位置更改为相对位置可以获得您想要的效果。

.button 
{
    transition: all 0.15s ease-in-out;

    i  
    {
        position:absolute;
        transition: all 0.15s ease-in-out;
    }
}

.button:hover 
{
   i 
   {
      position:relative;
   }
}

html:

<a href="#" class="button"><i class="fas fa-angle-left"></i> Previous</a>

scss:

.button {
background: red;
padding: 20px 20px;
color: white;
text-transform: uppercase;
border-radius: 50px;
cursor: pointer;
position: relative;
justify-self: center;
display: inline-block;
width: 140px;
text-decoration: none;
text-align: center;
transition: all 0.15s ease-in-out;
border: 1px red solid;

i {
   position:absolute;
   opacity: 0.0;
   transition: all 0.15s ease-in-out;
   transform: translateX(.5em);
  }
}  

.button:hover {
    background: red;
  border: 1px black solid;

  i {
    position:relative;
    transform: translateX(0px);
    opacity: 1.0;
    }
}

https://jsfiddle.net/pre3xzL5/1/