CSS, XHTML, Standards du web, Tutoriaux, Techniques Web, Astuces. Eniris : Post-it™ on line

L'enrichissement va se faire à l'aide de la balise CSS suivante :

a[hreflang]:after {
}

Ainsi par exemple nous allons afficher le code pays en gris #999 et en taille 9 pixels sans fond.
Il faudra écrire :

a[hreflang]:after {
content: "\0000a0[" attr(hreflang) "]";
color : #999;
background : transparent;
font-size: 9px;
}

Maintenant que nous savons afficher l'attribut de langue et le styler, remplaçons le par des petites images :

• (linkfr.png) pour le Français
• (linken.png) pour l'Anglais
• (linkde.png) pour l'Allemand

/* imagettes après lien */
a[hreflang|="fr"]:after {
content: "\0000a0"url(linkfr.png);
}

a[hreflang|="en"]:after {
content: "\0000a0"url(linken.png);
}

a[hreflang|="de"]:after {
content: "\0000a0"url(linkde.png);
}

Et pour que tout se passe au mieux dans le meilleur des mondes, j'ai découvert sur un site (désolé je n'ai plus l'adresse ...) un hack pour Opéra à ajouter :

a[hreflang] {
content: normal !important; /* Hack pour Opera */
}

• Lien LT

Le lien LT n'étant pas stylé avec une image, il apparait en gris #ccc taille 9 pixels comme défini dans la règl epar défaut. Il n'y a qu'à créer la vignette et à écrire la règle CSS en s'inspirant des autres.
Je mets à votre disposition mon fichier Photoshop avec les calques pour créer vos propres imagettes