Почему этот повернутый текст находится за пределами изображения со стрелкой вправо?

Question

Странно, я применяю стиль к нему, но иногда он применяется к SHIFT. Как можно заставить слово GROW двигаться влево от стрелки вправо? Он должен быть внутри.

Я пытался поместить текст перед стрелкой img, но он просто ломается и исчезает. Я также попытался полностью сместить и вырастить тег из тега и использовал transform translate, но его положение не могло остаться неизменным.

CSS

.grow {
    transform: rotate(-90deg) translate(50%, 0%);
  }

  .shift {
    transform: rotate(90deg) translate(-60%, 0%);
  }
  .shift,
  .grow {
    font-size: 20px;
    color: #aeaeae;
    font-weight: 500;
    padding: 15px;
  }
.slidenext {
    position: absolute;
    right: 10px;
    top: 250px;
  }

  .slideprev {
    position: absolute;
    left: 10px;
    top: 250px;
  }

codepen

Answer 1

Небольшая вещь, которую вы можете сделать здесь, это использование Flexbox

Я исправил ваш код здесь , просто посмотрите, если это то, что вам нужно.

 .slidenext {
    position: absolute;
    right: 10px;
    top: 250px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row-reverse;
}

и удалите свойство translate из текста Grow и Shift.

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

 flex-direction: row-reverse;

Если вы хотите изучать FLEXBOX, то очень простой и увлекательный способ изучения flexbox - flexbox froggy .