:before和:after伪元素在Firefox中没有显示

Question

Firefox无法显示`:after`和`:before`，但在Chrome中可以显示。

Firefox和Chrome截图:

在Firefox中直接查看源代码，CSS是存在的:

使用`:after`在页面上多个元素上出现这种情况。

我尝试过同时使用`:before`和`: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，密码：demo登录并单击“配置”以查看页面实时状态。在最新版本的 Firefox 中缺少很多按钮，这很奇怪，因为它根本没有显示出来。不像元素存在但我看不见，甚至在控制台中也没有显示其存在。

- Jack

---

为了解决您的问题，请将复选框包装在标签中，并将伪类样式放在标签上。 - connexo

唯一的问题是我无法使用CSS复选框技巧并在子元素被选中时定位到父元素的:after。 - Jack

如果是True，那么在代码中让标签跟随复选框，并使用:checked + label:after选择器。 - connexo

这里不需要 JS。为您的复选框赋予“id =“checkbox_id””，并使用 <label for="checkbox_id"> 将标签附加到它上面。 - connexo

Answer 1

可以通过在 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。

- Kevin Katzke

---

不确定我是否想依赖于这个工作。 - connexo

答案在2022年仍然有效。 - Valentine Shi

Answer 2

对于那些不能包含内容的元素，比如 <input /> 或者 <img /> ，你不能使用 ::after 和 ::before 。

::after 和 ::before 的作用如下：

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

它们被插入在DOM节点的内容之前和之后。由于<input />不能有内容，所以没有地方可以放置它。

现在让我们来检查一下复选框：

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

在这里，不能使用伪元素来包围***内容***。

- connexo

---

谢谢 Connexo。唯一让我不确定的是，这个代码在 Codepen 上使用 Firefox 也能正常工作？ - Jack

附注：Chrome支持在复选框上使用after/before标签，而Firefox不支持。 - guru