：之前&&：在僞元素未顯示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後

回答

相關問題