Comment afficher et enrichir la présentation de l’attribut langue d’un lien  avec un style CSS ?

Tout d’abord, un petit rappel : l’attribut de langue se spécifie en HTML dans la balise comme ceci :
…………………

Je précise qu’il faut indiquer la langue du lien et non le pays, sinon comment qualifier un lien qui pointe vers un site Suisse ou Belge ?

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: “000a0[" 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 :

  • fr (linkfr.png) pour le Français
  • en (linken.png) pour l’Anglais
  • de (linkde.png) pour l’Allemand

Nous écrirons la suite :

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

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

a[hreflang|="de"]:after {
content: “000a0″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 */
}

Résultat final :

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