:before && :after 伪元素不显示 Firefox答案

【问题标题】：:before && :after pseudo elements not showing Firefox:before && :after 伪元素不显示 Firefox
【发布时间】：2016-05-24 12:47:24
【问题描述】：

Firefox 不显示 :after 和 :before 但它们确实显示在 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 login with User: demo Pass: demo 并单击“config”。最新的 Firefox 中缺少很多按钮。

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

【问题讨论】：

要解决您的问题，请将您的复选框包装在标签中，并将您的伪类样式放在上面。
唯一的问题是我无法使用 CSS 复选框技巧并针对父级：在检查子级之后。
是的。在这种情况下，使标签跟随代码中的复选框并使用:checked + label:after 选择器。
这里不需要 JS。给你的复选框一个 id="checkbox_id" 并使用 <label for="checkbox_id"> 将标签附加到它。

标签： html css firefox

【解决方案1】：

您不能在不能包含内容的元素上使用::after 和::before，例如<input /> 或<img />。

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

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

它们被插入到 DOM 节点的 content 之前和之后。由于<input /> 不能有内容，所以无处可放。

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

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

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

【讨论】：

谢谢 Connexo。我仍然不确定的唯一一件事是它是否可以在 codepen 中使用相同的代码在 Firefox 上运行？
附注。 Chrome 支持复选框上的后/前标签。 Firefox 没有。

【解决方案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。

【讨论】：