before pseudo-element covering inner content

Question

so I have created a div as the parent with a span element inside, holding the title for the parent and I have defined a css before pseudo-element (:before) for the parent so when user hovers over the element it has a nice transition but the problem is : the :before covers the span element so the title gets hidden which is not acceptable of course !

here's the sample code on jsfiddle : http://jsfiddle.net/msU6p/4/

here's the HTML :

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

and styles :

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

• Please Note :

I tried using z-index on span setting it to 2 or so but It doesn't work and when I set z-index of before element to negative It goes under the parent's background-image which is not good

does anyone know where's my mistake or what can I possibly do to make this work only using css ?

Thanks in Advance

Answer 1

display:block; position:relative; for <span> can help to you. DEMO