:之前&&:之后的伪元素没有显示Firefox

Question

Firefox没有显示:之后和:之前,但它们确实在Chrome中显示.

Firefox和Chrome:

直接在Firefox中查看源代码显示CSS在那里:

这发生在页面上的多个元素上:after.

我尝试过使用前后.我也试过了::和:变种.

如果我在codepen中使用相同的CSS,它可以工作:http://codepen.io/anon/pen/XXOZWL

<input type="checkbox" class="mobile_auth" />

.mobile_auth {
    visibility: hidden;
}

.mobile_auth:after {
    background-image: url('https://lh4.googleusercontent.com/-gD_ItALdha8/AAAAAAAAAAI/AAAAAAAAAB4/eEbUyChzCJc/photo.jpg?sz=110');
    content: '';
    height: 33px;
    width: 33px;
    display: block;
    cursor: pointer;
    visibility: visible;
    margin: auto;
    position: relative;
    top: -3px;
    left: 3px;
}

.mobile_auth::after {
    background-image: url('https://lh4.googleusercontent.com/-gD_ItALdha8/AAAAAAAAAAI/AAAAAAAAAB4/eEbUyChzCJc/photo.jpg?sz=110');
    content: '';
    height: 33px;
    width: 33px;
    display: block;
    cursor: pointer;
    visibility: visible;
    margin: auto;
    position: relative;
    top: -3px;
    left: 3px;
}

.mobile_auth:checked:after {
    background-position: right;
}

您可以在以下位置看到该页面:***.com用户登录:demo Pass:demo并单击"config".最新的Firefox中缺少很多按钮.

这很奇怪,因为它根本没有显示.它不像元素那样,我看不到它.它甚至没有显示它存在于控制台中.

Answer 1

您不能使用::after和不能拥有内容的::before元素,例如.<input />

::after和这样::before工作:

<element>
  ::before
  ***content***
  ::after
</element>
<next-element>***content***</next-element>

它们在DOM节点的内容之前和之后插入.既然<input />没有内容,就无处可去.

现在让我们看一个复选框:

<input type="checkbox" />
<next-element>***content***</next-element>

这里,不能有***内容***用伪元素包围.

Answer 2

通过在 上使用以下内容，可以为 Firefox 浏览器启用预期行为input[type=checkbox]：

input[type=checkbox] {
  -moz-appearance:initial // Hack for Firefox Browsers
}

此选项允许您:before在输入元素上使用伪元素，就像它在 Safari、Chrome 和 Opera 浏览器中开箱即用一样：

input[type=checkbox]::before { 
    ...
}

目前moz-appearance是实验技术。更多信息以及浏览器兼容性的概述可以在这里获得：MDN web docs-appearance。