html - Firefox::after 伪元素不工作

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 (但是旧的符号仍然有效)