CSS: afficher la langue d’un lien

J’ai pris l’habitude d’entrer les attributs suivants pour chacun des liens présents sur mon blog:
<a href="url" class="offsite" hreflang="lang">titre</a>

Pour afficher le contenu de l’attribut hreflang après le lien (par exemple “Ceci est un lien en français [fr]“), on peut utiliser le style suivant:
a[hreflang]:after {
content: "000a0[" attr(hreflang) "]";
}

Tags: , ,

feed rss Vous aimez ce type de contenu?
Alors suivez-ce blog par RSS ou par email!

Continuez la lecture avec les articles suivants



7 commentaires pour “CSS: afficher la langue d’un lien”

  1. Anonymous dit :

    Pour un site francophone où d’habitude 9 liens sur 10 pointent vers des pages francophones je pense qu’il est inutile de répéter “fr”. Par contre quand un lien pointe vers une page non francophone alors là c’est utile.

    On pourra donc faire suivre le style que tu as indiqué par celui-ci:

    a[hreflang="fr"]:after{
    content: “”;
    }

  2. nando dit :

    Oups, j’ai oublié de m’identifier dans le message précédent!

  3. winset dit :

    Merci nando pour ton commentaire! C’est vrai que ce serait plus pratique de n’afficher que les langues autres que le FR. J’ai essayé de placer ta proposition de style mais ca n’affichait plus rien du tout (je l’ai mise après et avant) ??

  4. nando dit :

    Les règles suivantes devraient fonctionner:

    a[hreflang]:after{
    content: “\0000a0[" attr(hreflang) "]“;
    }
    a[hreflang="fr"]:after{
    content: “”;
    }

    En tout cas chez moi ça marche: tout ce qui n’est pas exactement “fr” est affiché.

  5. nando dit :

    Ah je vois que WordPress a supprimé une barre oblique inversée “” que j’ai placé dans le code de mon commentaire!

    Donc il y avait une barre oblique inversée juste entre la double quote et 000a0.

  6. winset dit :

    Parfait, ça fonctionne bien maintenant. Encore merci pour le conseil!

  7. co dit :

    Pourquoi ceci ne marche pas?

    a.ilien[hreflang]:before:over{content: “#” attr(hreflang) “#”;}

Laisser un commentaire



Tag Cloud