Before a pseudo-element covering internal content

Question

so I created divas a parent with an element spaninside, holding the title for the parent, and I defined a cssbefore the pseudo-element ( :before) for the parent, so when the user hovers over the element, it has a nice transition, but the problem is this: it :beforecovers the element span, so the title becomes hidden. which of course is unacceptable!

here's a jsfiddle code example: http://jsfiddle.net/msU6p/4/

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

• Note:

z-index span, 2 , z-index before . background-image,

- , , css?

Advance

Answer 1

display:block; position:relative; <span> . DEMO