a:not([href*="your-domain.com"])) that excludes your own domain. Then simply add the external link symbol via the ::after pseudo-element after the link text, preferably as a modern SVG.
One click and the user is gone. Or are they? Often, for your visitors, clicking a link feels like a leap into the unknown. Will they stay on your site or end up somewhere completely different? You can easily remove this uncertainty.
This guide shows you how to automatically add a symbol for links leaving your site with just a few lines of CSS code. Yep, that’s right – you don’t need to edit each link manually!
Why mark external links at all?
Visually highlighting external links is a small detail with a big impact. It offers you and your users three key advantages.
Advantage 1: Improved usability & expectation management
The most important reason to visually mark external links is better usability. When you clearly mark links leaving your site, visitors always know what happens when they click. This proactive expectation management prevents surprises and frustration.
Advantage 2: Increased trust
Transparency builds trust. By clearly showing which links lead to content outside your control, you act honestly and transparently with your users. This strengthens the trustworthiness of your site — an important factor in Google’s E-E-A-T concept.
Advantage 3: Targeted user guidance
Sometimes you actually want users to leave your site — for example, to check a source. By marking links, you give users conscious control over their journey while pursuing your own strategic goals.
For a deeper look at the strategic and SEO relevance of external links, check out my full article: External Links (Outbound Links) – Using them correctly for better rankings.
The basics: How does CSS detect an external link?
To automatically style external links, we use CSS attribute selectors. The most precise way is to target all links that do not point to your own domain and are not internal anchors or relative links.
a:not([href*="your-domain.com"]):not([href^="#"]):not([href^="/"]) { ... }
Guide: Mark external links with a symbol or icon
A small symbol next to external links improves user guidance and creates transparency. With a little CSS, you can automate this marking easily. We add the icon with the ::after pseudo-element.
The process has two steps:
- The display method (The "When"): Decide when an icon should appear.
- The icon version (The "What"): Then choose the icon style — either a simple Unicode character or a Font Awesome icon.
Part 1: Display methods (When should an icon appear?)
Choose one of the following three methods. Method 2 is usually the most flexible and recommended.
Method 1: Show only when needed (Opt-in with .extern)
The icon only appears when you manually add the CSS class .extern to a link. This gives you full control but requires manual effort for each link.
/* CSS selector: */
a.extern::after {
/* ... Insert icon code from Part 2 here ... */
}
/* HTML usage: */
<a href="https://example.com" class="extern">This link gets an icon</a>
<a href="https://other-site.com">This link does not</a>
Method 2: Automatic with exceptions (Opt-out with .no-icon)
(Recommended method) The icon appears automatically on all external links. You can define exceptions by adding the class .no-icon to a link (e.g. for social media buttons).
/* CSS selector: */
a:not([href*="your-domain.com"]):not([href^="#"]):not([href^="/"]):not(.no-icon)::after {
/* ... Insert icon code from Part 2 here ... */
}
/* HTML usage: */
<a href="https://external-source.com">Gets an icon automatically</a>
<a href="https://twitter.com/profile" class="no-icon">Does not get an icon</a>
Method 3: Always show automatically (Global)
The simplest but least flexible method. The icon will appear on absolutely every external link.
/* CSS selector: */
a:not([href*="your-domain.com"]):not([href^="#"]):not([href^="/"])::after {
/* ... Insert icon code from Part 2 here ... */
}
Part 2: Icon versions (What kind of icon?)
After choosing a method from Part 1, fill the CSS rule with one of the following icon versions.
Version 1: Unicode symbols (Simple & standard)
This is the easiest and fastest way. These symbols are included in most system fonts, require no external files, and are always license-free.
Combined example (Method 2 + Unicode icon):
a:not([href*="your-domain.com"]):not([href^="#"]):not([href^="/"]):not(.no-icon)::after {
content: '\2197'; /* Code for ↗ */
display: inline-block;
margin-left: 5px;
font-size: 0.9em;
}
Selection of Unicode symbols:
| Symbol | Description | CSS content Code |
|---|---|---|
| ↗ | North-east arrow (classic) | content: '\2197'; |
| 🔗 | Link chain | content: '\1f517'; |
| 🌐 | Globe | content: '\1f310'; |
Version 2: Font Awesome icons (Wide choice & consistency)
This version is ideal if you’re already using Font Awesome or need a specific icon that fits your design.
Note: Host Font Awesome locally
To stay independent from external servers, you should host Font Awesome yourself.
- Download: Get the “Free for Web” package here: fontawesome.com/download
- Upload: Unzip the file and upload the
cssandwebfontsfolders to your theme directory (e.g. under/assets/fontawesome/). - Integration: Include the CSS file via your theme’s
functions.php. Detailed instructions can be found here: Font Awesome Docs
Combined example (Method 2 + Font Awesome):
a:not([href*="your-domain.com"]):not([href^="#"]):not([href^="/"]):not(.no-icon)::after {
font-family: "Font Awesome 6 Free";
font-weight: 900; /* Important for "Solid" icons */
content: '\f35d'; /* Code for "arrow-up-right-from-square" */
display: inline-block;
margin-left: 5px;
font-size: 0.9em;
}
Important addition: Opening external links safely in a new tab
It’s common practice to open external links in a new browser tab with target="_blank" so users don’t leave your site. Always make sure to add rel="noopener noreferrer" to your links to close security gaps.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Secure external link</a>
Conclusion
You now have everything you need. Marking external links is a clear sign of professionalism, as it improves usability and strengthens your visitors’ trust. Use a precise CSS selector that excludes your own domain, and apply an exception class like .no-icon to stay in full control of special cases. And never forget to secure links that open in a new tab with rel="noopener noreferrer".
Now it’s your turn! Copy the recommended CSS code and add it to your website’s CSS to see the difference immediately. If you’re running a WordPress site and want full control over all your external links – including attributes like nofollow or sponsored – then our plugin is the perfect solution for you.
