Styling a external link is a good way of telling your website’s visitor that the link they are about to visit does not belong to the website they are viewing, but instead belongs to another website. Many websites inform visitors that the link is external by placing an directional arrow icon after the link, but you may prefer to make the external link a different colour than internal links or you may not like having to remember placing an icon after each and every external link. There is an easier way; you can use CSS to style external links – both links belonging to another domain and internal links that link to an external domain, i.e. affiliate links.

External Domain Names

You can use the following CSS to style external links:

a[href*="//"]:not([href*="yourdomain.com"]) { /* add styling here */ }

Add an icon before each external link:

a[href*="//"]:not([href*="yourdomain.com"]):before { content: " "; width: 16px; height: 16px; background: transparent url("/images/external.png") no-repeat; padding-right: 10px; }

In the above code snippet the image would be 16px by 16px and would be called external.png in the images directory. You can change this of course.

Add an icon after each external link:

a[href*="//"]:not([href*="yourdomain.com"]):after { content: " "; width: 16px; height: 16px; background: transparent url("/images/external.png") no-repeat; padding-left: 10px; }

In the above code snippet the image would be 16px by 16px and would be called external.png in the images directory. You can change this of course.

Let’s say you have a internal link that redirects to another domain name. You can use the following code snippet:

a[href*="?referer"] { /* add styling here */ }

In this case your internal link would look like this: yourdomain.com/?referer=externallink.com.