Question

So I have the following situation for a button I am making:

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

which can be seen fully on https://jsfiddle.net/pre3xzL5/（Font Awesome中的<i>标签）中翻译文本和标签。

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

我已经使用边距代替了它。但是我已经读到，使用边距进行过渡是不好的做法，并且不利于性能-因此请尝试使用翻译。

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/

在<a>-tag with CSS

1 个答案: