：之前＆amp;＆amp; ：伪元素后没有显示Firefox

Question

Firefox未显示：之后和：之前，但它们确实在Chrome中显示。

Firefox＆amp;铬：

直接在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并点击＆＃39; config＆＃39;。最新的Firefox中缺少很多按钮。

这很奇怪，因为它根本没有显示出来。它不像元素那样，我无法看到它。它甚至没有显示它存在于控制台中。

Answer 1

您无法对无法拥有内容的元素使用::after和::before，例如<input />。

::after和::before的工作方式如下：

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

它们在DOM节点的 content 之前和之后插入。由于<input />无法拥有内容，因此无处可放。

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

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

这里，***元素***不能用伪元素包围。

Answer 2

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

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

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

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

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