泄漏在被叠加的元素的背景文本颜色

Question

拥有html：<a href="">TEST</a>

和css：

a {
  color: #222;
  position: relative;
  display: inline-block;
}

a:hover {
  color: #fff;
  background-color: #222;
}

a::before {
  content: 'TE';
  position: absolute;
}

a:hover::before {
  color: red;
}

（Pastebin：http://jsbin.com/pefeweluli/edit?html,css,output）

我尝试做的是让背景文字颜色不会泄漏红色悬停元素，理想情况下不会为:: before元素设置背景颜色。

我是否应该闯入并使用额外的元素或JS？

提前致谢。

Answer 1

我最后以相反的方式做到了：

gcc-ranlib

它有效，但它确实存在填充问题