How-to Style External Links with CSS

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 */ }

Icon Before The External Link

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.

Icon After The External Link

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.

Internal Link That Links To An External Domain

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.