：之前&&：在伪元素未显示Firefox后

Firefox未显示：after和：before但它们确实在Chrome中显示。：之前&&：在伪元素未显示Firefox后

火狐&铬：

直接在Firefox中查看源显示CSS有：

这是发生在使用页面上的多个元素：后。

我已经尝试过使用之前和之后。我也尝试了::和：变化。

如果我使用相同的CSS中codepen它的工作原理： 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; 
}

您可以看到页面在直播：***与用户融为一体登录：演示密码：演示，并点击“配置” 。最新的Firefox中缺少许多按钮。

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

来源

2016-02-13 Jack Nicholson

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

唯一的问题是，我不能做CSS复选框的技巧，并针对父级：在孩子被选中后。 –

是的。在这种情况下，使标签紧跟代码中的复选框并使用'：checked + label：after'选择器。 – connexo

不能在要素使用: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>

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

来源

2016-02-13 09:52:24 connexo

谢谢Connexo。唯一我仍然不确定的事实是，它在代码中使用相同的代码在Firefox中工作？ –

附注。 Chrome支持复选框上的标记之前/之前。 Firefox不。 – guru

：之前&&：在伪元素未显示Firefox后

回答

相关问题