同一个元素hover和active同时设置背景时，点击的瞬间背景色缩短一块？

在项目中遇到这样的一个问题， 当同一个元素hover和active同时设置背景时，点击的瞬间背景色缩短一块（颜色变化的瞬间会有个白色空隙），视觉上看着很不舒服。查了很多资料都不行， 最后还是得巧用解决，以下代码亲测有效

悬浮和点击时设置不同的背景色

.item:before{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #f4f4f4;
  z-index: -1;
}
.item:hover:before{
  background-color: #f4f4f4 ;
  content: "";
}
.item:after{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #EAEAEA;
  z-index: -1;
}
.item:active:after{
  content: "";
}