Style External Links with CSS:
In some websites,developers style external links differently,you can do it easily with CSS. If you Style external links ,it would be nice to provide some kind of alert to your visitors and they know that you are linking to external content.In different ways you can style external links with CSS,many prefer to use image or icon.On the other hand some developers use hover,animation and special effects to style external links.
When you are writing article,sometimes you need to provide either internal link or external link for additional and in depth content.To open a link in a new window use target="_blank" attribute.
Add the following code snippet to your CSS to style external links with image.Don't forget to change mysite.com to your own website and upload a image with external-link.png. This is your external link image appears,when you provide a link .
a[href^="http://"]:not([href*="mysite.com"]):after,
a[href^="https://"]:not([href*="mysite.com"]):after{
content: "";
width:20px;
height:20px;
background: url('external-link.png');
}The following code snippet also do the same work.This CSS Style external links differently.
a[href^="http://"]:not([href*="mysite.com"]),
a[href^="https://"]:not([href*="mysite.com"]),
a[href^="//"]:not([href*="mysite.com"]), {
}