Salut la compagnie !

Aujourd'hui, une petite astuce CSS pour ajouter des icônes en fonction de vos liens. Par exemple, comme sur Wikipedia , on afficherait une icône comme celle-ci sur un lien externe. Mais on peut aussi mettre des icônes particulières en fonction du type du document lié. Par exemple, j'ai un lien qui pointe vers un document .pdf, et je veux le signaler à mes lecteurs,  comme ceci.

Le code CSS3 suivant vous permet d'arriver très simplement à vos fins :

a[href$=".pdf"]:before {
    content: url('images/doc_pdf.png');
    padding-right: 4px;
}

Le sélecteur CSS [href$=".pdf"] signifie que l'attribut "href" se termine par ".pdf".

Pour un ajout d'une icône sur tous vos liens externes, on suppose que ces liens commencent toujours par http://, on utilise donc le CSS suivant :

a[href^="http://"]:after {
    content: url('images/external.gif');
    padding-left: 4px;
}

Dans ce cas, on demande tous les liens dont l'attribut href commence par la chaine "http://".

Attention, ceci ne marche qu'avec CSS3, donc avec un navigateur récent (Firefox 3.5, Chromium, IE7+, et je suppose les dernières versions de Safari et Opera).

J'en profite pour faire un petit récap' des sélecteurs disponibles en CSS2 et 3. Avec la version 2, vous ne pouvez utiliser que =, ~= et |=. Avec CSS3, vous pouvez aller plus loin avec ^=, $= et *=. Je vous invite à lire les docs qui sont on ne peut plus claires sur l'utilisation de ces sélecteurs :

Pour aller plus loin...

Si vous souhaitez faire en sorte que votre code soit universellement fonctionnel (donc aussi sur IE6), le plus simple reste d'ajouter une classe à vos liens, par exemple external pour les liens externes, docpdf pour les documents pdf, etc. Mais c'est long et fastidieux, il faut reprendre tous vos liens, un travail que tout bon informaticien se refuse normalement de faire ! ;)

Et pour finir, l'article de Romy qui m'a inspiré : Signaler les liens externes par un picto. 

Note : J'utilise des icônes issues du pack par ted24.