Cyberial
@Cyberial
Cmon disco party shits

Как решить проблему с transition?

Доброго дня, верстаю для портфолио, и столкнулся с проблемой что при наведении на элемент, transition у псевдоэлемента не срабатывает, и красная полоска появляется моментально, css прикреплю ниже ну и фото, спасибо помогаторам )5c16bfc5e07bb691510034.png
.header-bottom {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.item-bottom {
  display: flex
  margin-bottom: 28px;
  position: relative;
  margin-right: 30px;
  width: 280px;
  height: 50px;
  border-top: 3px solid #f7eac4;
}

.item-bottom:nth-child(4) {
  margin-right: 0;
}

.item-bottom:hover {
  border-top: 3px solid #ffffff;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.item-bottom:hover::before {
  content: '';
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  position: absolute;
  width: 70px;
  height: 3px;
  top: -3px;
  left: 0;
  bottom: 0;
  right: 0;
  border-top: 3px solid #f38181;
}
  • Вопрос задан
  • 63 просмотра
Решения вопроса 2
Ankhena
@Ankhena
Нежно люблю верстку
А где начальное состояние-то? И transition тоже указывается для начального состояния элемента.
Типа того:
.item-bottom::before {
  content: '';
  width: 0;
  transition: all .3s ease-in-out;
}
Ответ написан
@DivineDraft
Все просто: встраивайте before изначально, ставьте opacity 0 и все остальные свойства, а потом при hover - opacity : 1;

Сейчас у Вас получается так, что элемент создается только при наведении.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
HTML Academy Санкт-Петербург
от 130 000 до 160 000 руб.
Mains Laboratory Москва
от 70 000 до 120 000 руб.
26 марта 2019, в 22:12
30000 руб./за проект
26 марта 2019, в 20:35
10000 руб./за проект