ElMoustiko
samedi 9 octobre 2004 à 18:38
Tout à fait, je vais te donner l'exemple mis sur le site de
Karl Dubost :
CODE
a[hreflang^="fr"] {
background: url(fr.gif) right center no-repeat;
padding-right: 12px;}
a[hreflang^="fr-qc"] {
background: url(fr-qc.gif) right center no-repeat;
padding-right: 12px;}
a[hreflang^="fr-ch"] {
background: url(fr-ch.gif) right center no-repeat;
padding-right: 12px;}
a[hreflang^="en-us"] {
background: url(en-us.gif) right center no-repeat;
padding-right: 12px;}
}
CODE
a[hreflang]:after {
content: url(/2002/09/03-fr-qc.gif);
}
Donc la premiere version permettra d'ajouter un petit drapeau à droite du lien, en image de fond, donc fonctionnera sur tous les navigateurs (a priori, enfin tous les modernes au moins, >v4), la seconde solution, que je trouve plus élégante, fera la même chose, mais en ajoutant l'image apres le lien, (:after).
Tu peux aussi ajouter du texte, content: "[EN]" ;
Mais avec :after (et :before) ca ne fonctionnera pas sous IE.
Donc pour ton exemple, avec du texte, ca ne fonctionnera pas sous IE a moins de faire une image de fond représentant l'écriture [EN], je trouve ca un peu bordelique pour si peu. Donc a mon avis contente toi de faire pour les non IE et tant pis pour les autres.
Donc un code de ce style irait :
CODE
a[hreflang="en"]:after, a[hreflang="en-us"]:after
{
content: "["attr(hreflang)"]";
}
Et zou ! le tour est joué, ca ajoute [en] ou [en-us] apres tes liens.
Tu peux faire aussi :
CODE
a[hreflang="en"]:after, a[hreflang="en-us"]:after
{
content: "[EN]";
}
Ce qui rajoutera [EN] apres les liens en et en-us.
Sinon autre solution, tu n'indique les hreflang QUE des liens en, en-us, ... et tu fais ceci via css :
CODE
a[hreflang]:after
{
content: "["attr(hreflang)"]";
}
ou bien sûr comme tout à l'heure
CODE
a[hreflang]:after
{
content: "[EN]";
}
Je suis en train de me dire aussi que tu dois pouvoir gérer la casse (majuscule ou minuscule) du content via text-transform: uppercase; ou lowercase. A tester !
Voilà !
@++