Как решить проблему с transition?
А где начальное состояние-то? И transition тоже указывается для начального состояния элемента.
Типа того:.item-bottom::before {
  content: '';
  width: 0;
  transition: all .3s ease-in-out;
}
Все просто: встраивайте before изначально, ставьте opacity 0 и все остальные свойства, а потом при hover - opacity : 1;
Сейчас у Вас получается так, что элемент создается только при наведении.