Style External Links with CSS

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!