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.
WikiPedia External Links Style with Icons

WikiPedia External Links Style with Icons

 

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.

Couple of things to Note

  • Replace spoontalk.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.

Styled External Link

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

 

 

 

 

 

Did you enjoy this article?
We regularly publish WordPress related Tutorials and Tips on this blog. Signup today and receive free updates straight in your inbox.
I agree to have my personal information transfered to Mad Mimi ( more information )
About Ankit

Founder of SpiceWp. We share useful Wordprss Tips and Tricks.

I have also released 17 Wordpress Plugins till date .

I regularly publish Wordpress related Tutorials and Tips on this blog.
If you like the content then consider subscribing to the blog here.

Comments

  1. Avinash Jude D'Souza says:

    Hey Ankit,

    How do you limit the CSS to only the post body area?

Speak Your Mind

*