Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Style External Links with CSS

By David Walsh on February 4, 2014

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 David WalshJuly 25, 2012
CSS 3D Folding Animation
Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...
By David WalshNovember 8, 2010
LightFace: Facebook Lightbox for MooTools
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox...

Incredible Demos

By David WalshDecember 17, 2012
CSS calc
CSS is a complete conundrum; we all appreciate CSS because of its simplicity but always yearn for the language to do just a bit more. CSS has evolved to accommodate placeholders, animations, and even click events. One problem we always thought...
By David WalshJuly 25, 2012
CSS 3D Folding Animation
Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Discussion

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

David Walsh
You add can another pattern match for whichever referer pattern you use:
```
a[href*="?referer"] {
 /* external styles */
}
```

Bruno Seixas
Thanks for the snippets :)
Binyamin
David, you can do the same with shorter selector:
```
[href*="//"]:not([href*="mysite.com"]) { }
```
Linesh Jose
Thanks for the code :)
Wassim
Nice snippets, I love this but how about browser compatibility?
Bubba
So, what styles are typically used for external websites? A change in font color? Background color?

Richard van Naamen

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;
}

Riderman
How to ignore Links With images?

example: http://jsfiddle.net/Ridermansb/NRw97/1/
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”]) */
}

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;
}