- Styling External Links with an Icon in CSS
- CSS Links
- Styling Links
- Example
- Example
- Text Decoration
- Example
- Background Color
- Example
- Link Buttons
- Example
- More Examples
- Example
- Example
- Example
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- CSS: Style external links
- CSS: Style external links
- How can I style external links like Wikipedia?
- demo
- Basics
- Allow certain domains as local
- jomendez
- There’s a way to do it better – find it. –Thomas A. Edison
- Styling External Links in your site with CSS
- Clicking on external links, navigating away..
- Book Tip
- :not compatibility
Styling External Links with an Icon in CSS
For technical docs, blogs and articles it’s often a good idea to differentiate between links within the site (internal) and links to another site (external) as it can be jarring to be reading a blog or technical docs, clicking on a link and getting kicked to an external site unexpectedly.
A nice UX pattern is to display an ’external link’ icon next to external links. A simple way to implement this is using a CSS pseudo selector targeting only links which begin with http:// or https:// .
If you’d like to exclude certain domains from displaying the icon (for example subdomains) you can set the icon to be hidden with something like: The CSS examples above are to be used within the section of a page, and isn’t intended for navbars, footers or elsewhere where the font size and colors may differ - where automating the appearance of these links may not be appropriate.
The icon used in the example above is Bootstrap’s ‘box arrow up-right’ icon , but feel free to switch to something else such as Font Awesome’s External-Link-Alt’ icon .
I used the neat URL-encoder for SVG service to convert the SVG code.
One gotcha is that images which are links have the icon appended which isn’t ideal. Unfortunately I don’t have an easy CSS-only fix for that. The :has() CSS relational pseudo-class would be perfect, but browser support is unfortunately nonexistent .
CSS Links
With CSS, links can be styled in many different ways.
Styling Links
Links can be styled with any CSS property (e.g. color , font-family , background , etc.).
Example
In addition, links can be styled differently depending on what state they are in.
The four links states are:
- a:link — a normal, unvisited link
- a:visited — a link the user has visited
- a:hover — a link when the user mouses over it
- a:active — a link the moment it is clicked
Example
/* unvisited link */
a:link color: red;
>
/* visited link */
a:visited color: green;
>
/* mouse over link */
a:hover color: hotpink;
>
/* selected link */
a:active color: blue;
>
When setting the style for several link states, there are some order rules:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Example
a:visited text-decoration: none;
>
a:hover text-decoration: underline;
>
a:active text-decoration: underline;
>
Background Color
The background-color property can be used to specify a background color for links:
Example
a:link <
background-color: yellow;
>
a:visited background-color: cyan;
>
a:hover background-color: lightgreen;
>
a:active background-color: hotpink;
>
Link Buttons
This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:
Example
a:link, a:visited <
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
>
a:hover, a:active background-color: red;
>
More Examples
Example
This example demonstrates how to add other styles to hyperlinks:
Example
Another example of how to create link boxes/buttons:
a:link, a:visited <
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
>
a:hover, a:active background-color: green;
color: white;
>
Example
This example demonstrates the different types of cursors (can be useful for links):
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
CSS: Style external links
Solution 2: I think this will help you resolve the issue simply, Add an offsite link icon after external links with CSS Quote from the article: This will make all links styled with an external linked icon in the end, And following code will prevent the external icon style on specific urls: Solution 3: OK, this is pretty similar to the other answers, but it’s short and sweet and works for both http and https. So to add an image, as already stated: link to another page in html how to make links in html a href to other site
CSS: Style external links
2021 Solution
a[href]:not(:where( /* exclude hash only links */ [href^="#"], /* exclude relative but not double slash only links */ [href^="/"]:not([href^="//"]), /* domains to exclude */ [href*="//stackoverflow.com"], /* subdomains to exclude */ [href*="//meta.stackoverflow.com"], )):after
Internal sites:
Lorem http://stackoverflow.com ipsum
Lorem /a/5379820 ipsum
Lorem //stackoverflow.com/a/5379820 ipsum
Lorem http://stackoverflow.com/a/5379820 ipsum
Lorem https://stackoverflow.com/a/5379820 ipsum
Lorem https://meta.stackoverflow.com/ ipsum
Lorem ftp://stackoverflow.com ipsum
External sites:
Lorem ftp://google.com ipsum
Lorem https://google.com ipsum
Lorem http://google.com ipsum
Lorem https://www.google.com/search?q=stackoverflow
Lorem //www.google.com/search?q=stackoverflow
Other anchor types
Lorem no-href ipsum
Lorem #hash ipsum2014 Solution
Using some special CSS syntax you can easily do this. Here is one way that should work for both the HTTP and HTTPS protocols:
a[href^="http://"]:not([href*="stackoverflow.com"]):after, a[href^="https://"]:not([href*="stackoverflow.com"]):after
This way shows external links ALA Wikipedia:
An example can be found here: http://jsfiddle.net/ZkbKp/
One simple rule, no hardcoding involved:
Works for all schemes. Has the added benefit of identifing mistyped internal URLs. For cloaked internal links redirecting externally, simply prefix the relative URL with // .
Credit goes to Mark Battistella who left this snippet on CSS-Tricks in 2012.
Update: Based on actual use I’ve personally found the above problematic as it styles all absolute links which can lead to unexpected styling in some situations (e.g. In Brave, when you download a page for offline viewing). My suggestion is to use a[rel*=»external»]::after instead and decorate your external links.
Linking External Style Sheets in CSS, Embedded or internal Style Sheets in CSS; Creating Media Dependent Style Sheets using CSS; How to specify media dependencies for CSS style sheets; Style Rules in CSS; Font Style in CSS; CSS outline-style property; Setting List Style Type in CSS; The outline-style Property in CSS; The border-style …
How can I style external links like Wikipedia?
demo
Basics
Using :after we can inject content after each matched selector.
The first selector matches any href attribute starting with // . This is for links that keep the same protocol (http or https) as the current page.
These are the traditionally more common urls, like http://google.com and https://encrypted.google.com
a[href^="http://"]:after, a[href^="https://"]:after We can then pass a url to the content attribute to display the image after the link. The margin can be customized to fit the
content: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png); margin: 0 0 0 5px; > Allow certain domains as local
Let's say we're on example.org and we want to mark links to blog.example.org as on the same domain for this purpose. This is a fairly safe way to do it, however we could have a url like http://example.org/page//blog.example.org/
note: make sure this comes after the above in your styles
For more strict matching, we can take our initial settings and override them.
a[href^="//blog.example.org/"]:after, a[href^="http://blog.example.org/"]:after, a[href^="https://blog.example.org/"]:after
I think this will help you resolve the issue simply,
Add an offsite link icon after external links with CSS
This will make all links styled with an external linked icon in the end,
And following code will prevent the external icon style on specific urls:
a[href^="http://www.stackoverflow.com"]
OK, this is pretty similar to the other answers, but it's short and sweet and works for both http and https. Of course, you will have problems if you use double slashes in your internal URLs, but you shouldn't be doing that anyway (see these questions).
I wish I'd known about this before I tagged all my links with class="internal" and class="external" .
So to add an image, as already stated:
Url - CSS: Style external links, One simple rule, no hardcoding involved: a[href*="//"] < /* make me do stuff */ >Works for all schemes. Has the added benefit of identifing mistyped internal URLs.
jomendez
There’s a way to do it better – find it. –Thomas A. Edison
Styling External Links in your site with CSS
Are you looking for an easy way to style and denote external links in your web site or blog, it is always good for the user to know when they are going to navigate away from your page, enriching the user experience. Perhaps most of the sites out there achieve this by placing code on the Back End. Here I going to share with you what I found on this topic, and how to do it just using CSS.
Clicking on external links, navigating away..
We are going to use CSS selector to apply styles to all the "a" (anchors) except for internal links. This is translated into code like this:
Notice that we combined the selector with some regular expression, the * mean select all elements, for a full list of selectors, you can visit:
http://www.w3schools.com/cssref/css_selectors.asp
Now, you can combine this selector with the ::after of the element to include for example an icon that might looks like the externals links on Wikipedia.
(from http://www.w3schools.com/)
Although Wikipedia doesn't use this approach, they use a class instead to insert the icon at the end of the external links, this should be done manually. With the method exposed here all the externals links will be styled automatically when the page loads.
Book Tip
CSS Mastery
Fully updated to the latest CSS modules, make the journey to CSS mastery as simple and painless as possible. This book dives into advanced aspects of CSS-based design, such as responsive design, modular CSS, and CSS typography. Through a series of easy-to-follow tutorials, you will learn practical CSS techniques you can immediately start using in your daily work.
Amazon
Here is a working example of how all the external links are decorated with the Wikipedia's external link icon
a[href*="//"]:not([href*="example.com"]):after < margin-left: 3px; content: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22 http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%2306c%22%20d%3D%22M1.5 %204.518h5.982V10.5H1.5z%22%2F%3E%3Cpath%20d%3D%22M5.765%201H11v5.39L9.427%207.937l-1.31-1.31L5.393%209.35l-2.69-2.688%202.81-2.808L4.2%202.544z%22 %20fill%3D%22%2306f%22%2F%3E%3Cpath%20d%3D%22M9.995%202.004l.022%204.885L8.2%205.07%205.32%207.95%204.09%206.723l2.882-2.88-1.85-1.852z%22%20fill%3D %22%23fff%22%2F%3E%3C%2Fsvg%3E) >
Also you can denotate all the links that navigate away from your page even internal links that get open in another tab or windows:
:not compatibility
One last thing to keep in mind when you use this approach is the browser compatibility with the :not css selector, for example Internet Explorer starting supporting it from version 9:
(from http://www.w3schools.com)
Ultimately, for the no compatible browsers you can detect the browser version with JavaScript or Jquery and then select all the external links and apply the style using JavaScript code:
Jquery Example:
$(function() < $('a').each(function(i, e) < if ($(e).attr("href") && ($(e).attr("href").indexOf("http://") >-1 || $(e).attr("href").indexOf("https://") > -1)) < $(e).css(< "background-image": "linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%2306c%22%20d%3D%22M1.5%204.518h5.982V10.5H1.5z%22%2F%3E%3Cpath%20d%3D%22M5.765%201H11v5.39L9.427%207.937l-1.31-1.31L5.393%209.35l-2.69-2.688%202.81-2.808L4.2%202.544z%22%20fill%3D%22%2306f%22%2F%3E%3Cpath%20d%3D%22M9.995%202.004l.022%204.885L8.2%205.07%205.32%207.95%204.09%206.723l2.882-2.88-1.85-1.852z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E)", "background-repeat": "no-repeat", "padding-right": "13px" >); > >); >); Working example: