CODEWITHSUNDEEP
css
Adrian Enriquez
Adrian Enriquez

Reputation: 8413

z-index not working on span with :before

How to put the :before behind the span? I know I did this before but I can't remember how. Here's the fiddle.

HTML

<span>Stack Overflow</span>

CSS

span{
background:#000;
position:relative;
color:#fff;
z-index:20;
}
span:before{
content:'';
background:#000;
position:absolute;
left:50%;
bottom:-10px;
width:20px;
height:20px;
z-index:1;
}

Fiddle

Upvotes: 2

Views: 3150

Answers (1)

BenM
BenM

Reputation: 53228

z-index is relative, so for the :before pseudo-element to appear underneath its parent <span>, you can specify a z-index of -1:

span:before{
    content:'';
    background:#000;
    position:absolute;
    left:50%;
    bottom:-10px;
    width:20px;
    height:20px;
    z-index:-1;
}

jsFiddle Demo

Upvotes: 7

Related Questions