CSS转换，悬停时位置不断移动

Question

我在right属性上有一个简单的css转换，用于在悬停时移动箭头的按钮。问题是，当你悬停时，它没有正确转换，如果你刷新（或重新运行）JSFiddle，那么你会注意到箭头在悬停后移动了位置。

就像它向后移动，然后向前移动，然后又向后移动？

这似乎只发生在Firefox中。

JSFiddle

Answer 1

发现问题。您的跨度是内联的，给它position: relative会导致问题。

只需更改为inline-block，即可使用：

.genericBtn span {
  display: inline-block;
  position: relative;
}

Answer 2

使用CSS伪元素使用一种更微妙的方法怎么样：

.genericBtn {
  background: #ffffff;
  color: #c40009;
  border: 1px solid #c40009;
  font-size: 20px;
  margin: 10px 0 0;
  padding: 20px 50px 20px 30px;
  width: 300px;
  position: relative;}
.genericBtn::after {
  content: ">";
  position: absolute;
  right: 37%;
  transition: all .3s ease-in;
}
.genericBtn:hover::after {
  transform: translate(10px,0); }

---

这是一个Fiddle