CODEWITHSUNDEEP
htmlcss
Mehran
Mehran

Reputation: 1449

before pseudo-element covering inner content

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

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

Upvotes: 10

Views: 15364

Answers (2)

Matthew Wu
Matthew Wu

Reputation: 11

@Anon answer worked for me

For people struggling with not wanting to apply "position: relative" to every single element, you can do

.outerDiv {
   > * {
      position: relative;
      z-index: 10;
   }
}

to apply the property to all direct children of the outerDiv.

Upvotes: 1

Anon
Anon

Reputation: 2874

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

Upvotes: 18

Related Questions