Question

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

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

这似乎只发生在Firefox中。

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

CSS过渡，位置继续在悬停

2 个答案:

这是Fiddle