Firefox ::伪元素无法正常工作

Question

我有一个CSS类，它在标题后输出一行

这适用于Safari和Chrome，但在Firefox中没有显示该行。

我的代码：

.sidebar h2 {
    color: #f7f7f7;
    width: 100%;
    font-size: 24px;
    position: relative;
}

.sidebar h2 span {
    background-color: #40d1b0;
    padding-right: 2px;
}
.sidebar h2::after {
    content:"";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.22em;
    border-top: 1px solid rgba(0,0,0,0.10);
    z-index: -1;
}

<h2><span>Show</span></h2>

容器div的类为Sidebar

修改

按要求提供JSFiddle

http://jsfiddle.net/jerswell/Lxsmt96k/

Answer 1

问题是z-index，将较低的z-index放到侧边栏类中，因此不会再隐藏它。

以下是新的fiddle，我只是将z-index: -2;添加到.sidebar选择器。

PS（挑剔）：在CSS3中，after不是伪类，而是伪元素，并且有一个新的符号：::after（但是旧的符号仍然有效）

Answer 2

如果我们将.sidebar的z-index更改为负值，则稍后可能会出现布局问题。其他元素可以与此元素重叠。我们应该使用：

.sidebar h2{position:relative;}
.sidebar h2 span{position:relative;z-index:2;}
.sidebar h2:after{z-index:1;}