CSS: usare il contenuto generato per evidenziare i campi obbligatori dei form

Il contenuto generato dei CSS è un ottimo modo per automatizzare l'inserimento di molti elementi della GUI di un sito web. Ecco un caso specifico.

Abbiamo questa marcatura:

<div>
	<label for="email" class="required">E-mail</label>
	<input type="email" name="email" id="email" required>
</div>
<div>
	<label for="site">Sito web</label>
	<input type="url" name="site" id="site">
</div>
<!-- continua -->

Vogliamo inserire un asterisco sui campi obbligatori. Ecco il codice CSS:

.required:after {
	content: '*';
	font-weight: bold;
	color: #c00;
	margin-left: 0.3em;
}

Volendo è possibile inserire anche un'icona con la stessa tecnica:

.required:after {
	content: url(required.png);
	margin-left: 0.3em;
}

In alternativa potete usare un web font, come Font Awesome.