HTML.it - Guida CSS di base - Pseudo-elementi

Gli pseudo-elementi :before e :after

Il numero è inserito con :before.

Il numero è inserito con :after.

<h3>Il numero &egrave; inserito con <code>:before</code>.</h3>
<h4>Il numero &egrave; inserito con <code>:after</code>.</h4>

h3:before {content: "1 ";}
h4:after {content: " 1";}

Ecco un link preceduto da un'immagine grazie a :before.

<p>Ecco un <a href="#">link</a>[...]</code>.</p>

a:before {content: url(logo.png);}

Il numero è inserito con :before.

<h3 class="numero">Il numero &egrave; inserito con <code>:before</code>.</h3>

h3.numero:before {
 content: "1 ";
 display: inline-block;
 width: 30px;
 height: 30px;
 background: red;
 padding: 3px;
 margin-right: 5px;
 color: white;
 font-size: 22px;
}

Il box quadrato è inserito con :before.

<h3 class="box">Il box quadrato &egrave; inserito con <code>:before</code>.</h3>

h3.box:before {
 content: " ";
 display: inline-block;
 width: 70px;
 height: 30px;
 background: red;
 padding: 3px;
 border: 2px solid black;
 margin-right: 5px;
}