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

Question

Как сделать заполнение для стрелки, чтобы стрелка переместилась вправо при наведении курсора?То есть стрелка перемещается от текста вправо, а при наведении курсора она возвращается на свое место.

#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;
  right: 50%;
  opacity: 0;
  -webkit-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  padding-right: 5px;
}

#next:hover:before{
  right:100%;
  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;
}

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

Answer 1

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

#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>

Answer 2

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

#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;
}