:before :after
Con questo post potrebbe partire la speciale rubrica “css che passione” 
Cosa sono :before e :after? Due pseudo-elementi grazie ai quali si può generare contenuto al volo prima e dopo un elemento all’interno del DOM HTML (e se ne può anche impostare lo stile). Quasi quasi non mi sono capito neanch’io quindi ecco un esempio: immaginiamo di avere un pezzo di codice html come questo:
<cite>Questa è una citazione!!!!</cite>
e di applicarvi questo css:
cite:before {
content:open-quote;
}
cite:after {
content:close-quote;
}
Il risultato ottenuto assomiglierebbe a qualcosa del genere:
Grazie alla proprietà content si può in realtà specificare qualsiasi contenuto; tornando all’esempio precedente, applicando questo stile:
cite:before {
content:”Citazione: “;
font-size:smaller;
}
il risultato dovrebbe essere:
Fantasmagorico vero? Peccato che si tratti di uno standard e non è quindi implementato da Internet Explorer (neanche nella versione 7 per quanto ne so).
Tuttavia rimane utile per abbellimenti grafici (ad uso dei soli eletti) e in generale per incrementare l’usabilità di un sito.
Per tutti i dettagli rimando alla documentazione ufficiale:
http://www.w3.org/TR/CSS2/generate.html#before-after-content
