Firefox ::after 伪元素不工作

Question

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

这在 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 的 class 为 Sidebar

编辑

JSFiddle 根据要求

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

Answer 1

问题出在z-index，把一个较低的z-index放到侧边栏class，这样它就不会再被隐藏了。

这是一个新的 fiddle，我只是简单地将 z-index: -2; 放到了 .sidebar 选择器中。

PS（吹毛求疵）：在CSS3中after不是伪class而是伪元素，并且有一个新的表示法：::after（但是旧的表示法仍然有效）

Answer 2

如果我们把.sidebar的z-index改成负值，后面的布局就会有问题。其他元素可以与该元素重叠。我们应该使用：

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

Firefox ::after 伪元素不工作

Firefox ::after pseudo element not working

html

css

firefox

编辑