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

Question

如何使箭头的填充在悬停时向右移动箭头？即箭头从文本中向右移动，当hover消失时，它又回到了原来的位置。

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

标签： htmlcsshovercss-transitions

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>