Propriété CSS "content"

Dans les liens

<a href="#" hreflang="fr">Ceci est un lien hypertexte</a>
a:after {content:" ["attr(hreflang)"] ";}

Ceci est un lien hypertexte

On peut indiquer qu'elle est la langue de la page liée en utilisant l'attribut hreflang. Aussi, j'ajoute des espaces et des crochets pour mettre en forme le lien.

<a href="http://www.mezzoblue.com/" hreflang="en">Ceci est un lien hypertexte externe</a>.
a {text-decoration:none;}
a[hreflang]:before {
	content:url(terre.gif)" ";
	vertical-align:middle;
}

Ceci est un lien hypertexte externe

En partant du principe qu'un lien externe contient un attribut hreflang. 

<a href="#">Un joli bouton</a>
a {
	display:block;
	float:left;
	text-align:center;
	text-decoration:none;
	background:url(bouton_fond.gif) 0 0 repeat-x;
}
a:before {
	vertical-align:middle;
	content:url(bouton_gch.gif);
}
a:after  {
	vertical-align:middle;
	content:url(bouton_dte.gif);
}

Un joli bouton

Plus besoin de code XHTML à rallonge pour créer des boutons ou des cadres arrondis. Plus d''infos sur le blog de Nanoum.

Dans les formulaires

<label for="adresse">Entrez votre adresse</label><input type="text" name="adresse" id="adresse" value="" />
label:after {content:" : ";}

Ici, on affecte un contenu textuel signifiant le lien entre l'étiquette (label) et le champs de formulaire (input).

<label for="adresse">Entrez votre adresse</label><input type="text" name="adresse" id="adresse" value="" />
label:after {content:" => ";}
label:before {
	content:"* ";
	color:#F00;
}

Dans le cas d'un champs à remplir obligatoirement, on peut imaginer mettre une sorte de drapeau. Ici, une étoile rouge.

Dans les textes

<p class="p01">Nunc tempus feugiat justo. Phasellus ut magna. Quisque tortor leo, auctor vel.</p>
<p class="p02">Lobortis at, sodales vel, nunc. Etiam vel leo.</p>
<p class="p03">Aenean semper. Integer porttitor.</p>
p.p01:before {content:open-quote;}
p.p03:after {content:close-quote;}

Nunc tempus feugiat justo. Phasellus ut magna. Quisque tortor leo, auctor vel.

Lobortis at, sodales vel, nunc. Etiam vel leo.

Aenean semper. Integer porttitor.

Pour ajouter des guillemets à un texte sur plusieurs paragraphes, cette méthode est interessante par le fait qu'elle evite des paragraphes avec des guillemets non-fermés.

Dans les listes

<ul>
	<li>Titre 1
		<ul>
			<li>Titre 1.1</li>
			<li>Titre 1.2
				<ul>
					<li>Titre 1.2.1</li>
					<li>Titre 1.2.2</li>
					<li>Titre 1.2.3</li>
				</ul>
			</li>
			<li>Titre 1.3</li>
			<li>Titre 1.4</li>
		</ul>
	</li>
	<li>Titre 2</li>
	<li>Titre 3</li>
	<li>Titre 4</li>
</ul>
li:before {
	content:"Section : ";
	letter-spacing:.2em;
	font-size:8pt;
	font-variant:small-caps;
}
li li:before {content:"Chapitre : ";}
li li li:before {content:"Paragraphe : ";}

Avec une hiérarchie listée, on peut établir une étiquette pour chaque niveaux d'arborescence.

Dans toutes les autres balises

On peut, par exemple, imaginer de baliser par une image toutes les balises XHTML peu courantes...

<code>

Ceci est un code : 15sd5cjYI6.

<kbd>

Tapez conf.exe dans la fenêtre d'execution.

<cite>

Et des goélands, en veux-tu ? En voilà ! s'exclama Benoît.

<dfn>

Le pommier arbre fruitier commun en Normandie.