Usando: prima /: dopo selettori per aggiungere margini attorno Elementi

Question

ho implementato (una versione modificata di) di Gene Locklin 'profondità', che funziona bene, ecco il codice:

body:before { 
    height: 10px; 
    width: 110%; 
    position: fixed; 
    top: -10px; 
    left: -10px; 
    z-index: 6; 
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.8); 
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.8); 
    box-shadow: 0px 0px 10px rgba(0,0,0,0.8); 
    content: ""; 
} 

Ma vorrei usare the: before &: dopo i selettori per aggiungere margini o padding, si conosce una sorta di gap, per separare un modulo dal testo circostante.

Questo mi viene dopo che ho provato ad usare questi selettori per dare qualche spaziatura intorno a paragrafi specifici, senza successo ho girato lo styling di questi sulla base dei loro attributi di destinazione.

Mi rendo conto che i selettori sono stati progettati principalmente per facilitare l'auto-testo e che è perfettamente facile farlo con margini o riempimento (aggiunti a seguito di query di seguito), interruzioni di riga, span, una divisione vuota o anche utilizzando JavaScript per creare un elemento, e. Ma mi piacerebbe farlo con: prima dello &: dopo.

Ecco il codice di esempio che vorrei ottenere lavoro:

form:before { 
    height: 20px; 
    content: ""; 
} 

form:after { 
    height: 20px; 
    content: ""; 
    } 

possibilità penso possa essere la prevenzione di questa di lavorare ...: prima /: dopo la necessità di essere visualizzato come a livello di blocco in quanto sono normalmente in linea (ma la 'profondità' non ha bisogno di questo?) e/o: prima /: dopo richiede il posizionamento assoluto.

Grazie in anticipo per il vostro generoso contributo.

Answer 1

Provare a specificare display: block;. Non è necessario che siano position: absolute;.

form:after { 
    content: ' '; 
    display: block; 
    height: 20px; 
} 

form:before { 
    content: ' '; 
    display: block; 
    height: 20px; 
}