css - z-index 不适用于 :before 跨度

Question

如何将 :before 放在 span 后面？我知道我以前做过，但我不记得怎么做了。这是 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

Answer 1

z-index是相对的，所以对于 :before出现在其父元素下方的伪元素 <span> , 您可以指定 -1 的 z-index :

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

jsFiddle Demo