How to Apply Different Style to External Links

Have you noticed that WikiPedia styles external links differently than the internal links? The external links have an icon besides them. The different styling tells a user that clicking on this link will take him to an external domain.

Here is a screenshot.

 

In this post I will share a snippet which lets you provide a different look to the external links.

Lets Start

1) Upload the External Url icon:

We will first upload the icon image via media uploader. The image path will be referenced in the CSS snippet. I downloaded the Icon Image from this Externa url  

2) Add CSS

Now add the following CSS snippet. You can edit the theme style-sheet or use a Custom CSS plugin (recommended)

This is a conditional CSS rule.

a[href^="http://"]:not([href*="thewphosting.com"]):after,
a[href^="https://"]:not([href*="thewphosting.com"]):after{
    content: " " url("https://thewphosting.com/wordpress/wp-content/uploads/2015/01/external-icon-16px.png");   
}

Couple of things to Note

• Replace thewphosting.com with your domain name
•  We need to enter the url of the icon image. You can find the Image Url from the Media Library

This how the external links will look now.

Alternative Method.

One can also add a CSS class to external link and style them differently , but that requires manually adding CSS class to every external link.  However with the above approach style is automatically applied to all external Link.

I hope you found the tutorial useful. This tutorial was inspired by this discussion

Update

On of our users asked how can he target the links inside the post body.  Here is the modified code. It will make sure that only the links contained withing post body are styled differently

.post a[href^="http://"]:not([href*="thewphosting.com"]):after,
.post a[href^="https://"]:not([href*="thewphosting.com"]):after{
    content: " " url("https://thewphosting.com/wordpress/wp-content/uploads/2015/01/external-icon-16px.png");   
}