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

这是一个小提琴