css - 使用 CSS 翻译 <a> 标签内的文本和 <i> 标签

Question

所以对于我正在制作的按钮，我有以下情况:

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

可以在 https://jsfiddle.net/pre3xzL5/ 上完整看到(<i> - 来自 Font Awesome 的标签)。

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

我是用边距来完成的。但我读过，使用边距进行过渡是一种不好的做法，对性能不利 - 因此尝试使用翻译。

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>

CSS:

.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/