Marquer un lien externe en CSS facilement : Icône flèche

Quand un lien extérieur s’ouvre dans un nouvel onglet, il est souvent préférable de le signaler clairement à vos visiteurs. Avec quelques lignes de CSS, vous pouvez ajouter une petite icône à un lien externe utilisant target="_blank" et rendre votre site plus propre, plus moderne et plus agréable à utiliser.

Dans ce tutoriel UX, vous allez apprendre à détecter un lien extérieur en CSS, comprendre le fonctionnement du sélecteur target="_blank" et afficher une icône élégante sans modifier votre HTML. Le tout étape par étape, avec des explications simples et un exemple concret facile à réutiliser sur votre propre site.

• Ajouter une icône aux liens qui s’ouvrent dans un nouvel onglet, sans toucher à chaque balise HTML une par une.
• Comprendre comment fonctionnent les sélecteurs d’attributs et les pseudo-éléments CSS avec un exemple concret et facile à réutiliser.
• Améliorer l’expérience utilisateur de votre site avec un détail visuel simple, propre et particulièrement utile sur un blog ou une documentation.

Nous allons partir de ce code :

a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

Et nous allons le décortiquer tout au long de ce tutoriel.

Pourquoi signaler un lien extérieur ?

Sur un site web, tous les liens ne jouent pas le même rôle. Certains dirigent vers une autre page de votre site. D’autres envoient le visiteur vers un site externe : documentation officielle, article complémentaire, outil en ligne, réseau social, boutique, etc…

Quand un lien extérieur s’ouvre dans un nouvel onglet avec target="_blank", le comportement change. Le visiteur reste techniquement sur votre page d’origine, mais une nouvelle page apparaît ailleurs dans le navigateur.

Ce n’est pas forcément gênant, au contraire. C’est même souvent utile. Par exemple, si vous rédigez un tutoriel et que vous envoyez vos lecteurs vers une documentation CSS externe, vous pouvez vouloir qu’ils gardent votre article ouvert pendant leur lecture.

Le petit problème, c’est que l’utilisateur ne le devine pas toujours. Une icône discrète permet donc de lui dire : “Attention, ce lien va s’ouvrir ailleurs”. C’est un peu comme mettre une pancarte avant une sortie d’autoroute. Personne n’aime rater la bonne sortie, surtout sur Internet.

Comprendre le rôle de target="_blank"

C’est un attribut HTML très courant. En HTML, un lien classique ressemble à ceci :

<a href="https://example.com">Visiter le site</a>

Ce lien s’ouvre dans le même onglet. Si le visiteur clique dessus, il quitte votre page actuelle.

Pour ouvrir ce lien dans un nouvel onglet, on ajoute l’attribut target="_blank" :

<a href="https://example.com" target="_blank">
    Visiter le site
</a>

Ici, target indique au navigateur où ouvrir la page. La valeur _blank signifie : “ouvre ce lien dans un nouvel onglet ou une nouvelle fenêtre”.

Pourquoi le détecter avec CSS ?

Plutôt que d’ajouter manuellement une icône dans chaque lien, on peut demander au CSS de le faire automatiquement.

Au lieu d’écrire ceci partout :

<a href="https://example.com" target="_blank">
    Visiter le site ↗
</a>

On garde un HTML propre :

<a href="https://example.com" target="_blank">
    Visiter le site
</a>

Puis le CSS ajoute lui-même l’icône. C’est plus élégant, plus facile à maintenir, et surtout beaucoup moins pénible si vous avez déjà des centaines d’articles.

Le sélecteur CSS a[target="_blank"]

Il permet de cibler uniquement certains liens.

La première ligne du code est la plus importante :

a[target="_blank"]::after {

Elle signifie : “sélectionne tous les liens <a> qui possèdent l’attribut target="_blank", puis ajoute quelque chose après leur contenu”.

On peut découper cela en trois parties.

1. D’abord, a cible les liens HTML.
2. Ensuite, [target="_blank"] limite la sélection aux liens qui ont précisément cet attribut.
3. Enfin, ::after crée un pseudo-élément après le texte du lien.

Autrement dit, ce CSS ne va pas modifier tous les liens du site. Il ne concerne que ceux qui s’ouvrent dans un nouvel onglet. C’est exactement ce que l’on veut.

Exemple simple

Avec ce HTML :

<p>
    Consultez 
    <a href="https://developer.mozilla.org" target="_blank">
        la documentation CSS
    </a>
    pour aller plus loin.
</p>

Le navigateur affichera le texte du lien, puis l’icône ajoutée par le CSS.

En revanche, ce lien ne sera pas marqué :

<a href="/contact">Contactez-nous</a>

Pourquoi ? Parce qu’il ne contient pas target="_blank".

Ajouter une icône avec ::after

Qu’est-ce que ::after ?

Le pseudo-élément ::after permet d’ajouter un élément visuel après le contenu d’un élément HTML, sans modifier directement le HTML.

C’est une sorte de petit assistant invisible. Il ne se voit pas dans le code HTML, mais le navigateur l’affiche quand même grâce au CSS.

Dans notre cas, on l’utilise pour placer une icône après le texte du lien.

content: "";

La propriété content est obligatoire avec ::after. Même si l’on ne met aucun texte dedans, il faut la déclarer. Ici, on crée un contenu vide, car l’icône sera affichée avec une image de fond.

C’est un peu comme poser une boîte vide sur la table avant de la décorer. Sans boîte, impossible d’accrocher quoi que ce soit dessus.

👉 Pour aller plus loin : Liste des pseudo-classes CSS

Le code CSS expliqué ligne par ligne

Voici une version commentée du code, plus agréable pour les débutants :

/* On cible tous les liens qui s’ouvrent dans un nouvel onglet */
a[target="_blank"]::after {
    
    /* Obligatoire pour afficher le pseudo-élément ::after */
    content: "";

    /* Permet de donner une largeur et une hauteur à l’icône */
    display: inline-block;

    /* Largeur de la petite icône */
    width: 14px;

    /* Hauteur de la petite icône */
    height: 11px;

    /* Petit espace entre le texte du lien et l’icône */
    margin-left: 4px;

    /* Icône SVG intégrée directement dans le CSS */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");

    /* L’icône s’adapte à la taille du bloc */
    background-size: contain;

    /* On évite que l’icône se répète comme un papier peint */
    background-repeat: no-repeat;
}

display: inline-block

Par défaut, un pseudo-élément peut être un peu difficile à dimensionner correctement. Avec display: inline-block, on lui donne un comportement très pratique : il reste sur la même ligne que le texte, mais on peut lui appliquer une largeur et une hauteur.

C’est parfait pour une petite icône placée juste après un lien.

👉 Pour en savoir plus : La propriété display CSS

width et height

Ces deux propriétés définissent la taille de l’icône :

width: 14px;
height: 11px;

L’icône reste petite et discrète. C’est important, car elle doit informer le lecteur sans voler la vedette au contenu. On veut une indication visuelle, pas une enseigne lumineuse de fête foraine.

Vous pouvez bien sûr adapter ces valeurs :

width: 16px;
height: 16px;

Une taille carrée peut être plus confortable si vous utilisez une autre icône.

margin-left

La propriété suivante ajoute un espace entre le texte et l’icône :

margin-left: 4px;

Sans cette marge, l’icône serait collée au dernier mot du lien. Visuellement, ce serait moins lisible. Un petit espace suffit à rendre l’ensemble plus propre.

Comprendre l’image SVG intégrée

Nous allons utiliser une image directement dans le CSS. La ligne la plus impressionnante est celle-ci :

background-image: url("data:image/svg+xml,...");

Elle peut faire peur au premier regard. Pourtant, le principe est simple : au lieu d’utiliser un fichier image séparé, on intègre directement une petite image SVG dans le CSS.

Le SVG est un format d’image vectorielle. Cela signifie qu’il reste net même si sa taille change. Pour une icône, c’est idéal.

L’avantage de cette méthode est qu’il n’y a pas besoin d’ajouter un fichier .svg dans votre thème, votre dossier d’images ou votre serveur. Tout est contenu dans le CSS.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Pourquoi l’URL semble bizarre ?

Le SVG a été encodé pour pouvoir être placé dans une URL CSS. Certains caractères comme <, >, ou " sont transformés en versions compatibles, par exemple %3C ou %3E.

Ce n’est pas très lisible pour un humain, mais le navigateur comprend très bien. Votre navigateur a déjà vu bien pire dans sa vie…

Améliorer légèrement le code

Le code de départ fonctionne déjà, mais on peut le rendre un peu plus précis.

Par exemple :

a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    vertical-align: -2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

Ici, j’ai modifié la hauteur pour obtenir une icône carrée, puis ajouté :

vertical-align: -2px;

Cette propriété permet d’aligner un peu mieux l’icône avec le texte. Selon votre police d’écriture, votre taille de texte et votre thème WordPress, l’icône peut sembler trop haute ou trop basse. Cette petite correction permet d’ajuster son placement.

Attention à l’accessibilité

Une icône décorative

Dans notre exemple, l’icône est ajoutée en CSS. Elle n’est donc pas vraiment lue comme un contenu important par les lecteurs d’écran. C’est plutôt une information visuelle complémentaire.

Pour un simple indicateur graphique, c’est généralement acceptable. Cependant, si l’ouverture dans un nouvel onglet est une information essentielle pour vos visiteurs, vous pouvez aussi l’indiquer dans le texte du lien ou dans un attribut aria-label.

Par exemple :

<a 
    href="https://example.com" 
    target="_blank" 
    rel="noopener noreferrer"
    aria-label="Visiter le site Example, ouverture dans un nouvel onglet">
    Visiter le site Example
</a>

C’est un peu plus long, mais plus clair pour les outils d’assistance.

👉 Pour aller plus loin : Les Attributs Aria pour l’accessibilité

Ne pas oublier rel="noopener noreferrer"

Quand vous utilisez target="_blank", il est recommandé d’ajouter aussi :

rel="noopener noreferrer"

Ce n’est pas pour le style, mais pour la sécurité et la confidentialité. En résumé, cela évite que la page ouverte puisse interagir avec votre page d’origine d’une manière indésirable.

👉 L’attribut rel pour un lien <a>

Un lien externe propre peut donc ressembler à ceci :

<a 
    href="https://example.com" 
    target="_blank" 
    rel="noopener noreferrer">
    Voir la ressource
</a>

Ensuite, votre CSS se charge automatiquement d’ajouter l’icône.

Tester le résultat dans une vraie page

Pour vérifier que tout fonctionne, vous pouvez créer un petit exemple HTML :

<p>
    Voici un lien vers 
    <a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
        MDN Web Docs
    </a>.
</p>

<p>
    Et voici un lien interne vers 
    <a href="/contact">
        la page contact
    </a>.
</p>

Avec votre CSS, seul le lien vers MDN affichera l’icône. Le lien interne, lui, restera normal.

C’est ce comportement qui rend cette technique intéressante : elle est automatique, mais ciblée. Vous ne risquez pas d’ajouter des icônes partout sans raison.

Adapter le style à votre site

Chaque site a son identité visuelle. Sur un blog pédagogique, vous pouvez garder une icône discrète. Sur un site plus graphique, vous pouvez choisir une taille plus visible.

Vous pouvez ajuster l’espacement :

margin-left: 6px;

Vous pouvez aussi modifier la taille :

width: 16px;
height: 16px;

Ou encore réduire l’opacité pour rendre l’icône plus légère :

opacity: 0.75;

Ce qui donnerait :

a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    vertical-align: -2px;
    opacity: 0.75;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

L’objectif est de trouver le bon équilibre. L’icône doit être visible, mais elle ne doit pas gêner la lecture.

Éviter certains cas particuliers

Il peut arriver que vous ne vouliez pas afficher cette icône partout. Par exemple, dans un bouton, dans un menu, ou dans une carte très stylisée.

Dans ce cas, vous pouvez exclure certains liens avec une classe CSS.

Imaginons ce lien :

<a href="https://example.com" target="_blank" class="no-icon">
    Lien sans icône
</a>

Vous pouvez adapter le CSS ainsi :

a[target="_blank"]:not(.no-icon)::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    vertical-align: -2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

La partie importante est :

:not(.no-icon)

Elle signifie : “applique ce style sauf si le lien possède la classe no-icon”.

C’est très pratique pour garder le contrôle. Le CSS automatique, c’est bien. Le CSS automatique que vous pouvez désactiver quand vous voulez, c’est encore mieux.

👉 En savoir plus sur : La pseudo-classe :not en CSS

FAQ

a[target="_blank"]

Cela permet d’appliquer automatiquement un style ou une icône uniquement aux liens externes ouverts dans un nouvel onglet.

---

Marquer automatiquement un lien extérieur avec CSS est une petite amélioration, mais elle donne tout de suite une impression de site plus soigné. Le visiteur comprend mieux ce qui va se passer, votre contenu gagne en clarté, et vous évitez d’ajouter manuellement des icônes dans tous vos articles.

Ce genre de détail fait partie des bonnes habitudes à prendre quand on apprend le CSS. On ne cherche pas seulement à “faire joli”, on cherche aussi à guider la lecture, à rendre l’interface plus compréhensible, et à respecter les attentes des visiteurs.

Je vous conseille maintenant de tester ce code sur une vraie page, avec plusieurs liens internes et externes. Observez le rendu, ajustez la taille, l’espacement, l’alignement, puis adaptez-le à votre thème. C’est souvent en modifiant ces petits détails que l’on progresse vraiment en CSS. Et puis, avouons-le : quand une simple règle CSS donne l’impression que le site est plus professionnel, c’est toujours assez satisfaisant.

👉 Les liens externes améliorent-ils votre SEO ?