Pseudo-elementi CSS

Gli pseudo-elementi CSS permettono di aggiungere effetti particolari a selettori come <a>, <p>, <h1>, <div>, etc..

Gli pseudo-elementi hanno una sintassi di questo tipo:

selettore:pseudo-elemento {propietà: valore}

Alcuni esempi di pseudo-elementi CSS:

Lo pseudo elemento :first-line aggiunge lo stile solo alla prima linea di testo

p.esempio:first-line
{
color:#FF0000
}

<p class="esempio">un testo qualunque che vada a capo</p>

un testo qualunque che vada a capo

Lo pseudo-elemento :first-letter aggiunge lo stile scelto alla prima lettera

p.esempio1:first-letter
{
font-weight:bold; font-size:16px;
}

<p class="esempio">prima carattere</p>

Primo carattere

Non funziona con internet explorer

p.esempio2:before
{
content: url(li.gif);
}

<p class="esempio2">un testo qualunque</p>

un testo qualunque

Non funziona con internet explorer

p.esempio3:after
{
content: url(li.gif);
}

<p class="esempio3">un testo qualunque</p>

un testo qualunque