CSS

Style External Links Differently

When you are writing content on your website there will be times when you want to refer to other content on the internet, this can be to either your own articles or to external sources for other people's content.

When you link to external content it's common practice to open this content up in a new tab, this way the reader won't be taken away from there place in the article.

To open your links in a new window you can use the target="_blank" attribute.

<a href="url" target="_blank">External Link</a>

When you are linking to external content it would be nice to give your visitors some sort of indication that you are linking to external content and this link will take you away from the current site. On some websites you will see a small icon new to external links that looks like two windows with an arrow through them.

You can do this automatically with CSS by changing the style of external links to add a icon next to external links, found this answer on stackoverflow that makes it very easy to style external link with the following code.

a[href^="http://"]:not([href*="example.com"]):after,
a[href^="https://"]:not([href*="example.com"]):after{
    content: "";
    width:20px;
    height:20px;
    background: url('external-link-icon.png');
}
Back to top