Gli pseudo-elementi :before e :after consentono di creare un elemento e di inserirlo prima o dopo l'elemento a cui la regola CSS si riferisce.
Si definiscono tali perché di fatto non cambiano il DOM, ma aggiungono elementi fantasma.

Il classico esempio è quello di aggiungere un contenuto prima o dopo un tab, come in questo esempio:

.separator:before {
  content: "|";
}

.separator:after {
  content: "|";
}

L'effetto di questo codice è quello di aggiungere, prima e dopo l'elemento a cui si riferisce, un contenuto, che nel nostro caso è un carattere di separazione.
Senza l'utilizzo della proprietà content queste direttive non sono efficaci ed è necessario che sia sempre inclusa, anche se con valore vuoto ("").

Il valore di content può anche far riferimento ad un'immagine:

.separator:before {
   content: url(path.jpg);
}

Le proprietà che possiamo includere all'interno ci consentono anche di trattare l'elemento inserito come se fosse un normale elemento della pagina, potendo assegnare padding, larghezza, altezza e così via.

Il supporto a questi elementi è disponibile da IE8+, Chrome 2+, FireFox 3.5+, Opera 9.2+, Safari 1.3+.