Che cos'è & :: before, & :: after in CSS?

Question

Volevo creare una linea temporale verticale e ho trovato questa pagina.

http://cssdeck.com/labs/oz2nu681

Ho copiato il codice e ci sono alcune cose che sto avendo difficoltà con.

• & :: dopo
• & :: prima
• .radio: selezionata; & + .relativo;

Ho provato a cambiarlo in quel codice di stile, ma sono rimasto bloccato qui. Anche il codice css è diverso da quello che contiene un file css tradizionale. Cos'è questo codice e come lo uso?

Answer 1

&::after è in realtà nulla in CSS, ma è una caratteristica della SASS/SCSS ed è probabilmente scritto in un contesto come questo:

li { 
    /* some style 1 */ 

    &::after { 
    /* some style 2 */ 
    } 

} 

che compila a:

li { /* some style 1 */ } 
li::after { /* some style 2 */ } 

In sostanza, la e commerciale in SASS richiama il selettore genitore quando si compila in CSS.

EDIT Non è possibile utilizzare la e commerciale in un file .css, in quanto non ha alcun significato, è possibile utilizzare solo in file sass/SCSS che vengono compilati a CSS utilizzando un SASS pre-processore.

post sul blog (non mia) circa e commerciale in SASS:

http://www.joeloliveira.com/2011/06/28/the-ampersand-a-killer-sass-feature/

EDIT 2 ulteriori risposte:

Tutto il resto è CSS vaniglia, ::after, ::before sono pseudo elements, .relative e .radio sono class selectors, :checked è un pseudo class per input ty Radio pes e casella di controllo e + è un adjacent sibling selector

MDN dovrebbe essere (uno) dei tuoi autorità per la documentazione CSS, così ho scelto di collegare alle loro pagine, piuttosto che semplicemente copiare e incollare il contenuto dei loro documenti in questa risposta.