This is a super simple way to distinguish external and internal links on your site without having to require the content editors to do anything more than link to what they need to.

The trick to display different styles for external links comes through the use of the attribute selector.

You can include anything you want for the alternative style, but in this case I’ve decided to change the color of the link and include a pseudo HTML element (the content: "\21B8"; bit)which I then flipped to face the right rather than the left (the trasform scale(-1,1) bit).

To get it to sit higher I used the vertical-align:super rather than negative margins, and it’s set to display:inline-block because you can’t transform pseudo elements without setting it to this (or block)

a, a:visited { color: blue;
text-decoration: none;}

a:hover {
  border-bottom: 1px solid;
}

a[href*="//"]:not([href*="codepen.io"]) {
    /* external link styles, use :before or :after if you want! */
  color: coral;
  &:after {
  content: "\21B8";
    font-size: 0.6em;
    vertical-align: super;
    margin-left: -0.1em;
    display: inline-block;
    position: relative;
    transform: scale(-1, 1);
  }
}					

See the Pen Styling an External Link a href by Justin Avery (@justincavery) on CodePen.