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
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)
An excerpt from Styling an external link a href