Styling External Links

Automatically add an icon or symbol to offsite links using CSS.

Example

Home - a link to another page on this site

Neocities - an external link; note the arrow at the end

The Code

a[href^="http://"]::after, a[href^="https://"]::after {
    content: "↗";
}

Basically any href attributes that begin with "http://" or "https://" will be selected. Then :after will append whatever you want to the end of it, in this case an arrow ↗.

If you have internal links that use http:// you can also add the following to clear any formatting from those links.

a[href*="yourwebsite.org"]::after {
    content: none;
}

What about image links? Unfortunately there isn't an automatic way to do this (that I know of anyway) but you can use a css class.

a.linkout::after {
    content: none;
}

<a class="linkout" href="website.com"><img src="image.png"></a>

Now any links you class as linkout will not have the external styling.