在伪元素覆盖内部内容之前

Question

所以我创建了一个div带有span元素的父元素,持有父元素的标题,我为父css元素定义了一个前面的伪元素(:before),所以当用户将鼠标悬停在元素上时,它有一个很好的过渡,但问题是:在:before覆盖span件这样的标题被隐藏这是不能接受的,当然!

这是jsfiddle上的示例代码:http://jsfiddle.net/msU6p/4/

这是HTML:

<div class="menuItem_Large" id="node_1_menu">
    <span>menu item 1</span>
</div> 

和风格:

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

• 请注意 :

我尝试使用z-index上跨度将其设置为2左右,但它不工作,当我设置z-index的before元素负面它去下父母的background-image这是不好的

有谁知道我的错误在哪里,或者我可以做些什么来使这项工作只使用css？

提前致谢

Answer 1

display:block; position:relative;为<span>能帮助到您.DEMO