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

Question

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

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

可以在 https://jsfiddle.net/pre3xzL5/上完全看到(来自字体真棒的<i>标签(。

基本上，我希望按钮内的文本从一开始就居中(现在不是(，然后当我悬停时，箭头(<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>

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/