如何使悬停效果不适用于:伪选择器之前？

我有一个非常简单的链接,显示为块,角落里有一个小绿星.

的jsfiddle

我想这样做,当你将鼠标悬停在链接上时,链接本身会略微透明,但:before伪选择器不会受到影响.

我看了一些关于这方面的问题,但由于某种原因,我无法让他们的解决方案起作用.这可能吗？我不确定我是否只是编写错误的CSS选择器.

编辑:理想情况下,我希望能够处理背景图像和背景颜色.

请改用rgba(r, g, b, a)值.

在:hover改变alpha值.

a {
  display: block;
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 1);
  position: relative;
}
a:before {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  content: "?";
  background: green;
}
a:hover {
  background: rgba(255, 0, 0, 0.5);
}