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

попробуй это...

#next {
  cursor: pointer;
  position: absolute;
  float: right;
  top: 50%;
  width: auto;
  color: #383736;
  font-weight: bold;
  font-size: 20px;
  user-select: none;
  right: 75px;
  transition:         0.2s ease-in;
  -o-transition:      0.2s ease-in;
  -ms-transition:     0.2s ease-in;
  -moz-transition:    0.2s ease-in;
  -webkit-transition: 0.2s ease-in;
}

#next:before{
  content:"Next";
  position:absolute;
  color:#383736;
  left: 50%; // <--- here
  opacity: 0;
  -webkit-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  padding-right: 5px;
}

#next:hover:before{
  left:100%; // <--- here
  transition:         0.6s ease-in;
  -o-transition:      0.6s ease-in;
  -ms-transition:     0.6s ease-in;
  -moz-transition:    0.6s ease-in;
  -webkit-transition: 0.6s ease-in;
  opacity:1;
}

Вы можете использовать перевод для элемента стрелки (промежуток):

#next {
  cursor: pointer;
  position: absolute;
  float: right;
  top: 50%;
  width: auto;
  color: #383736;
  font-weight: bold;
  font-size: 20px;
  user-select: none;
  right: 75px;
  transition: 0.2s ease-in;
}

#next:before {
  content:"Next";
  position:absolute;
  color:#383736;
  right: 50%;
  opacity: 0;
  transition: 0.6s ease-in;
  padding-right: 5px;
}

#next:hover:before {
  opacity: 1;
}
#next span {
  display: inline-block;
  transition: 0.6s ease-in;
}
#next:hover span {
  transform: translateX(50%);
}

<a  id = "next"><span class = "arrow">&#10230;</span></a>