Style External Links with CSS

By  on  

Styling external links is a common practice on most informational sites likes Wikipedia.  As a user, it's nice to know when you're being sent to another resource.  Many sites do the external links check on the server side, adding a `rel=external` attribute value or `external` class to external links.  In some cases that isn't possible or plausible.  After trolling around the interwebs, I found the following useful CSS snippet for styling external links:

/* long version */
a[href^="http://"]:not([href*="mysite.com"]),
a[href^="https://"]:not([href*="mysite.com"]), 
a[href^="//"]:not([href*="mysite.com"]), {
    
}
/* shorter version! */
a[href*="//"]:not([href*="mysite.com"]) {
    /* external link styles, use :before or :after if you want! */
}

First you have to qualify the start of the link, then qualify the domain.  Internal links wont match and external links wont match the comparison.  A useful snippet and something to keep in your library in case you need it!

Recent Features

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • By
    Create Custom Events in MooTools 1.2

    Javascript has a number of native events like "mouseover," "mouseout", "click", and so on. What if you want to create your own events though? Creating events using MooTools is as easy as it gets. The MooTools JavaScript What's great about creating custom events in MooTools is...

  • By
    Printing MooTools Accordion Items

    Sometimes we're presented with unforeseen problems when it comes to our JavaScript effects. In this case, I'm talking about printing jQuery and MooTools accordions. Each "closed" accordion content element has its height set to 0 which means it will be hidden when the...

Discussion

  1. What if there is a link in my website like http://external.com/?referer=mysite.com ?

    • You add can another pattern match for whichever referer pattern you use:

      a[href*="?referer"] {
       /* external styles */
      }
      
  2. Bruno Seixas

    Thanks for the snippets :)

  3. David, you can do the same with shorter selector:

    [href*="//"]:not([href*="mysite.com"]) { }
    
  4. Thanks for the code :)

  5. Nice snippets, I love this but how about browser compatibility?

  6. Bubba

    So, what styles are typically used for external websites? A change in font color? Background color?

  7. Is have used this slidely different for my wordpress site:

    /* show external links differently */
    a[href^="http://"]:not([href*="mydomain.com"]):before{ 
        content: " ";
        width: 16px;
        height: 16px;
        background: no-repeat url('images/link.gif'); 
        padding-right: 1.2em;
    }
    
  8. How to ignore Links With images?

    example: http://jsfiddle.net/Ridermansb/NRw97/1/

  9. Armin

    @Riderman You don’t. CSS is designed to to be applied in one traversal of the DOM tree. This limits it to selectors that are based solemnly on what was before (higher up) in the dom tree. You cannot select on what comes after/deeper in the DOM tree in CSS.

    In your example you are trying to style an a element based on the fact, that an img element is deeper in the tree.

    Solution: use a css-class for such a elements that should ignore the styling done through the [href=??] matching selectors.

    a.no-external-link-style {
    /*undo styling through a[href*=”//”]:not([href*=”mysite.com”]) */
    }

  10. tzee

    @Riderman Use JS / jQuery to add a class to links that wrap images, then add a css rule that removes or hides your :before, based on that class. I’m using :after, and FontAwesome..

    jQuery('a img').parent().addClass('linked-img');
    
    a[href*="//"]:not([href*="mysite.com"]):after { 
        font-family: FontAwesome;
        content: "\f08e";
        font-size: 13px;
        color: #ccc;
        padding-left: 7px;
    }
    a.linked-img:after {
    	display: none;
    }
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!