Как сделать плавное появление псевдоэлемента?

Question

Задача такая, есть кнопка с иконкой «i» и при наведении на нее, нужно чтобы иконка отодвигалась влево и появлялась надпись полная «Информация» рядом с иконкой… Я сделал следующее…

.btn-information {
  transition: .3s;
}

.btn-information::after {
  content: "";
  opacity: 0;
  transition: .3s;
}

.btn-information:hover::after {
  content: " Информация";
  opacity: 1;
  transition: .3s;
}

<button type="buton" class="btn btn-outline-secondary btn-sm float-right btn-information"><i class="far fa-info"></i></button>

Но он прыгает на ширину записи и плавно появляется. Подскажите как реализовать?

Answer 1

есть кнопка с иконкой «i» и при наведении на нее, нужно чтобы иконка отодвигалась влево и появлялась надпись полная «Информация» рядом с иконкой

Предложу такой вариант...

Немного добавил в твои стили и часть закомментировал. max-width: 700px; подобран "эмпирически".

.btn-information {
  /*transition: .3s;*/
}

.btn-information::after {
  display: inline-block;
  max-width: 0;
  content: "";
  opacity: 0;
  /*transition: 3s;*/
}

.btn-information:hover::after {
  max-width: 700px;
  content: " Информация";
  opacity: 1;
  transition: 3s;
}

<button type="buton" class="btn btn-outline-secondary btn-sm float-right btn-information"><i class="far fa-info"></i></button>

БЛОГ НА HUSL

Как сделать плавное появление псевдоэлемента?

Ответы (1 шт):