Pseudo-elementi

Gli esempi mostrano l'uso degli pseudo-elementi. Testate con vari browser per verificare il supporto.

:first-letter

La prima lettera del paragrafo sarà di un bel rosso vivo.

Codice:

#par1:first-letter {
color: Red;
font : bold 22px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

:first-line

La prima linea di questo paragrafo sarà rossa e la dimensione del font di 22 pixel. Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah Blah BlahBlah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah

Codice:

#par2:first-line {
color: Red;
font : bold 22px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

:before

Una stringa prima del paragrafo.

Codice:

#par3:before {
content: "Il testo di questo paragrafo è..";
}

:after

Puntini sospensivi alla fine del paragrafo.

Codice:

#par4:after {
content: "...";
}