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的类名为

编辑

根据要求提供JSFiddle

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

- Justin Erswell

---

从所有选择器中移除了.sidebar后，功能正常。 - Weafs.py

@chipChocolate.py：同意。 - jbutler483

孤立的代码运行良好。可能是由于其他原因。可能由于其 z-index: -1 被其他元素覆盖。 - Leo

@JustinErswell - 请在 Stack Snippet 或 Fiddle 上重新现该问题。 - Weafs.py

@chipChocolate.py 添加了小提琴。 - Justin Erswell

Answer 1

问题出在 z-index 上，将侧边栏类别的 z-index 值设低一些，这样它就不会再被隐藏了。

这里有一个新的代码片段，我只是简单地给 .sidebar 选择器加上了 z-index: -2;。

PS（吹毛求疵）：在CSS3中，after 不是伪类而是伪元素，并且有一个新的符号表示它：::after（但旧符号仍然可用）。

- meskobalazs

---

我已经编辑了问题以反映信息，谢谢。 - Justin Erswell

Answer 2

如果我们将 .sidebar 的 z-index 值改为负数，后续可能会对布局造成问题。其他元素可能会重叠在此元素上。我们应该使用：

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

- Shyam