Can CSS: non selector target: before e: after selectors

Question

Sto cercando di usare CSS: not() per selezionare il selettore precedente. È possibile?

Esempio:https://jsfiddle.net/uuq62b8d/

a.button:before { 
    content: "Show Text"; 
} 

a.button:not(:before) { 
    display: none; 
} 

<a href="#" class="button">Hide Text</a> 

Answer 1

Secondo W3C Spec:

La negazione pseudo-classe,: senza (X), è una notazione funzionale prendendo un semplice selettore (esclusa la negazione pseudo-classe stessa) come argomento. Rappresenta un elemento che non è rappresentato dal suo argomento.

Un semplice selettore è un selettore di tipo, un selettore universale, un selettore di attributi, un selettore di classe, un selettore ID o una pseudo-classe.

Come si può vedere dalle dichiarazioni di cui sopra, :not() richiede solo un semplice selettore come argomento e pseudo-elementi non rientrano sotto la categoria semplice selettore. Quindi, no, non puoi ottenere ciò che stai provando nel modo in cui stai provando.

Un modo per nascondere il contenuto predefinito dell'elemento, ma ottenere il contenuto dello pseudo-elemento da visualizzare sarebbe quello di impostare font-size: 0px sull'elemento e quindi sostituirlo alla dimensione richiesta all'interno del selettore dello pseudo-elemento come nel seguente frammento:

a.button:before { 
 
    content: "Show Text"; 
 
    font-size: 16px; 
 
} 
 
a.button { 
 
    font-size: 0px; 
 
}

<a href="#" class="button">Hide Text</a>

---

Nota: Come sottolineato da Rob nei suoi commenti alla domanda, è meglio iniziare a utilizzare la sintassi :: (double colon) per gli pseudo-elementi che vanno avanti. Gli sviluppatori tendono ad attenersi alla versione : (a due punti) quando è richiesto il supporto IE8, ma con Microsoft che ne interrompe il supporto nel gennaio '16, potrebbe essere il momento giusto per iniziare a utilizzare la sintassi dei due punti. Ma la scelta spetta allo sviluppatore, solo nel caso, hai un cliente che ha ancora bisogno del supporto IE8.

Il sotto è ciò che il Selectors Spec ha da dire su questo:

A-pseudo elemento è realizzato in due punti (: :) seguito dal nome dello pseudo-elemento.

Questa notazione è introdotta dal documento corrente al fine di stabilire una discriminazione tra pseudo-classi e pseudo-elementi. Per compatibilità con i fogli di stile esistenti, i programmi utente devono anche accettare la precedente notazione a due punti per gli pseudo-elementi introdotti nei livelli CSS 1 e 2 (vale a dire: prima riga,: prima lettera,: prima e: dopo). Questa compatibilità non è consentita per i nuovi pseudo-elementi introdotti in questa specifica.