Html ：在&&；：在伪元素不显示Firefox之后

Firefox没有显示：after和：before，但它们确实显示在Chrome中

Firefox和Chrome：

在Firefox中直接查看源代码表明CSS存在：

这在页面上的多个元素上发生，使用：after

我试过前后都用。我还尝试了：：和：变体

如果我在codepen中使用相同的CSS，它可以工作：

.mobile_auth{
可见性：隐藏；
}
.mobile_auth:after{
背景图像：url（'https://lh4.googleusercontent.com/-gD_ItALdha8/AAAAAAAAAAI/AAAAAAAAAB4/eEbUyChzCJc/photo.jpg?sz=110');
内容：''；
高度：33像素；
宽度：33px；
显示：块；
光标：指针；
能见度：可见；
保证金：自动；
位置：相对位置；
顶部：-3px；
左：3px；
}
.mobile_auth:：之后{
背景图像：url（'https://lh4.googleusercontent.com/-gD_ItALdha8/AAAAAAAAAAI/AAAAAAAAAB4/eEbUyChzCJc/photo.jpg?sz=110');
内容：''；
高度：33像素；
宽度：33px；
显示：块；
光标：指针；
能见度：可见；
保证金：自动；
位置：相对位置；
顶部：-3px；
左：3px；
}
.mobile_auth:选中：之后{
背景位置：右；
}

您可以在：**.com上看到该页面，使用用户：demo Pass:demo登录，然后单击“配置”。最新的Firefox中缺少很多按钮

---

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

您不能在不能包含内容的元素上使用

：after

和

：before

，例如

或

：:after

和

：：before

的工作方式如下：

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

：：之前
***内容***
：：之后
***内容***

它们在DOM节点的内容前后插入。因为

不能有内容，所以没有地方放它

现在让我们用一个复选框进行检查：

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

***内容***

---

在这里，不能有***内容***被伪元素包围。

可以通过在

输入[type=checkbox]

上使用以下命令为Firefox浏览器启用预期行为：

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

此选项允许您在输入元素上使用

：before

伪元素，就像它在Safari、Chrome和Opera浏览器中的作用一样：

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

---

moz外观

是目前的实验技术。有关浏览器兼容性的更多信息和概述，请访问此处：。

要解决您的问题，请将您的复选框包装在标签中，并将您的伪类样式放在标签上。唯一的问题是，我无法执行CSS复选框技巧并将目标锁定在父项：在选中子项后。True。在这种情况下，使标签跟随代码中的复选框，并使用

：checked+label:after

选择器。此处无需JS。为您的复选框指定一个

id=“checkbox\u id”

，并使用

将标签贴在复选框上。谢谢Connexo。我唯一不确定的是，它在Firefox上使用相同的代码在codepen中工作，这是一个旁注。Chrome支持复选框上的after/before标记。Firefox没有。

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