html 伪元素作用,html – 在伪元素覆盖内部内容之前

所以我创建了一个div作为父元素,里面有一个span元素,持有父元素的标题,我在父元素的伪元素(：before)之前定义了一个css,所以当用户将鼠标悬停在元素上时,它有一个很好的过渡

但问题是：在覆盖span元素之前,标题被隐藏,当然是不可接受的！

这是HTML：

menu item 1

和风格：

.menuItem_Large

{

position: absolute;

left: 0px;

display: inline-block;

padding-left: 6px;

padding-right: 6px;

height: 20px;

line-height: 16px;

vertical-align: middle;

background-image : url('http://i58.tinypic.com/21eyrk8.png');

background-repeat: repeat;

cursor:pointer;

}

.menuItem_Large:before

{

content:"";

position:absolute;

top:0px;

left:0px;

width:0%;

height:20px;

background-color:rgba(0,200,255,1);

transition:width 0.3s ease-out;

}

.menuItem_Large:hover:before

{

width:100%;

}

.menuItem_Large span

{

color: white;

font-size: 16px;

}

>请注意：

我尝试在span上使用z-index将其设置为2左右,但它不起作用,当我将前面元素的z-index设置为负时,它在父元素的背景图像下面,这是不好的

有谁知道我的错误在哪里或我可以做什么才能使这个工作只使用CSS？

提前致谢