web-dev-qa-db-fra.com

Comment puis-je styliser des liens externes comme Wikipedia?

Je voudrais faire la distinction entre les liens externes et internes en utilisant uniquement CSS.

Je voudrais ajouter une petite icône à droite de ces liens, sans qu'elle ne recouvre d'autre texte.

L'icône que je voudrais utiliser est la icône utilisée sur Wikipedia .

Par exemple, il s'agit d'un lien externe:

<a href="http://stackoverflow.com">StackOverflow</a>

Il s'agit d'un lien interne:

<a href="/index.html">home page</a>

sample of desired result

Comment puis-je le faire en utilisant uniquement CSS?

cssprogressive-enhancement
29
Brigand

démo

Les bases

En utilisant :after nous pouvons injecter du contenu après chaque sélecteur correspondant.

Le premier sélecteur correspond à tout attribut href commençant par //. C'est pour les liens qui gardent le même protocole (http ou https) que la page actuelle.

a[href^="//"]:after,

Ce sont les URL traditionnellement les plus courantes, comme http://google.com et https://encrypted.google.com

a[href^="http://"]:after, 
a[href^="https://"]:after {

On peut alors passer une URL à l'attribut content pour afficher l'image après le lien. La marge peut être personnalisée pour s'adapter à la

  content: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png);
  margin: 0 0 0 5px;
}

Autoriser certains domaines comme locaux

Disons que nous sommes sur example.org et nous voulons marquer les liens vers blog.example.org comme sur le même domaine à cet effet. C'est un moyen assez sûr de le faire, mais nous pourrions avoir une URL comme http://example.org/page//blog.example.org/

note: assurez-vous que cela vient après ce qui précède dans vos styles 

a[href*="//blog.example.org/"]:after {
  content: '';
  margin: 0;
}

Pour une correspondance plus stricte, nous pouvons prendre nos paramètres initiaux et les remplacer.

a[href^="//blog.example.org/"]:after, 
a[href^="http://blog.example.org/"]:after, 
a[href^="https://blog.example.org/"]:after {
  content: '';
  margin: 0;
}
35
Brigand

Je pense que cela vous aidera à résoudre le problème simplement,

Ajouter une icône de lien hors site après les liens externes avec CSS

Citation de l'article:

Cela rendra tous les liens stylisés avec une icône liée externe à la fin,

a[href^="http://"] {
    background: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png)     center right no-repeat;
    padding-right: 13px;
}

Et le code suivant empêchera le style d'icône externe sur des URL spécifiques:

a[href^="http://www.stackoverflow.com"]  {
    background: none;
    padding-right: 0;
}
8
eagles

OK, c'est assez similaire aux autres réponses, mais c'est court et doux et fonctionne à la fois pour http et https. Bien sûr, vous aurez des problèmes si vous utilisez des doubles barres obliques dans vos URL internes, mais vous ne devriez pas le faire de toute façon ( voircesquestions =).

a:not([href*="//"]) {
    /* CSS for internal links */
}

a[href*="//"] {
    /*CSS for external links */
}

J'aurais aimé en être informé avant J'ai marqué tous mes liens avec class="internal" et class="external".

Donc, pour ajouter une image, comme déjà indiqué:

a[href*="//"]::after {
    content: url(/* image URL here */);
}
7
Keith