
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");
}
- How to create 301 Redirects in WordPress - December 21, 2019
- How to Filter Blog Posts by Author in WordPress Admin panel - October 21, 2019
- How to convert / change post type in wordpress - October 21, 2019
Hey Ankit,
How do you limit the CSS to only the post body area?