Genesis Themes

  • Home
  • Genesis Tutorials
  • WP Tutorial
  • Twenty Fifteen Theme
  • Social Media
  • WP Plugins

How to Style External Links With CSS

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"]), {

}

Related Posts

  • How to Find CodeCanyon ThemeForest Purchase Code
  • Boilerplate CSS Media Queries for Responsive Website
  • Highlight Current Menu Item Using jQuery
  • Add Click to Call Phone Number Link With HTML5
  • JavaScript to Load Disqus on Scroll
  • How to Add HTML 5 Support to Thesis Theme
  • No Self Pings : 2 ways to Remove WordPress Self Pingbacks
  • Custom CSS Media Queries for IOS Devices
  • Load Disqus Comments On Click With AJAX

Bluehost and Siteground Coupons for January 2016.

Best Premium WordPress Themes from TemplateMonster
download wordpress themes from MonsterOne

Categories

  • Blog
  • Blogger
  • Genesis Tutorials
  • Social Media
  • Top Websites
  • Twenty Fifteen WordPress Theme
  • WordPress Plugins
  • WordPress Tutorial