如何在悬停时向右移动箭头

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

您可以在箭头元素（跨度）上使用翻译：

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