Firefox ::after 伪元素不起作用答案

【问题标题】：Firefox ::after pseudo element not workingFirefox ::after 伪元素不起作用
【发布时间】：2015-01-02 19:59:06
【问题描述】：

我有一个 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/

【问题讨论】：

在我从所有选择器中删除 .sidebar 后工作正常。
@chipChocolate.py：同意。
在这里工作正常，使用这个小提琴：jsfiddle.net/ur9b67q5
隔离代码工作正常。这可能是另一个原因。可能因为它的z-index: -1而被其他元素覆盖
@chipChocolate.py 谢谢你，不过我只需要定位这个元素中的 H2

标签： html css firefox

【解决方案1】：

问题是z-index，在侧边栏类中放一个较低的z-index，这样就不会再被隐藏了。

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

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

【讨论】：

我已编辑问题以反映信息，谢谢

【解决方案2】：

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

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

【讨论】：