Переведите текст и тег <i>внутри тега <a>с помощью CSS - PullRequest
Новая
       44

Переведите текст и тег <i>внутри тега <a>с помощью CSS

0 голосов
/ 14 октября 2018

Итак, у меня есть следующая ситуация для кнопки, которую я делаю: 

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

, которая полностью видна на https://jsfiddle.net/pre3xzL5/ (<i> -tag от Font Awesome).

Как правило, я хочу, чтобы текст внутри кнопки центрировался с начала (это не сейчас), а затем, когда я наведу курсор мыши, появляется стрелка (<i> -tag) и идет от середины слева,и затем следующий также должен идти от середины (по центру, как и должно быть) при перемещении немного вправо.Однако теперь следующий начинается с того места, где он должен быть, когда завис.Это имеет смысл, поскольку тег <i> занимает место, но вот в чем вопрос: можно ли это исправить?

Вместо этого я сделал это, используя поля.Но я читал, что использование полей для переходов и это плохая практика, и не очень хорошая для производительности - отсюда и попытка с переводом.

1 Ответ

0 голосов
/ 14 октября 2018

Эти два оператора перехода - единственные, которые вам нужны, изначально установленные для соответствующих элементов.Абсолютная позиция, измененная на относительную позицию при наведении, дает желаемый эффект. 

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

...