背景文字颜色泄露了叠加元素

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

（引擎收录：http://jsbin.com/pefeweluli/edit?html,css,output）

我试图做的是对文本的背景色最好不要为:: before元素设置背景颜色。

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

在此先感谢。

Answer 1

我最后做它周围的其他方法：它的工作原理

a { 
    color: #222; 
    position: relative; 
    display: inline-block; 
} 
a:hover { 
    color: red; 
    background-color: #222; 
} 
a::before { 
    content: 'ST'; 
    text-align: right; 
    position: absolute; 
    width: 100%; 
} 
a:hover::before { 
    color: #fff; 
} 

，但它确实有填充