背景文字顏色泄露了疊加元素

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

，但它確實有填充