CSS: Style external links

Question

I want to style all external links in my website (Wordpress). I\'m trying with:

.post p a[href^=\"http://\"]:after

But Wordpress put the entire

Answer 1

Pseudo elements have a '::' instead of a ':' in the syntax.

There is also only a need to match a URL starting with 'http' rather than 'http://' or 'https://'.

Therefore I am not sure the accepted answer and other rated answers are technically correct.

To include a neat icon you can place an SVG in a CSS variable and then use it in your CSS rule.

    --icon-external-link: url('data:image/svg+xml,\
        ');

That looks fiddly but it is a neat external link icon that can be edited to suit your theme without having to go back to a desktop publishing application. Because the icon is part of the stylesheet you don't have to have the browser do an extra download for it. Also because it is SVG is is crisp. The 'rect' is the box, the group with the 'line' and 'polygon' is the arrow. All the numbers are integers and you can adjust them if you want to.

Then in your rule you can reference it like so:

a[href^="http"]:not([href*="example.mil"])::after {
    content: '';
    background: no-repeat left .25em center var(--icon-external-link);
    padding-right: 1.5em;
}

The matched links are the ones that start with http and don't include your domain name. Both 'http://' and 'https://' start with 'http' so there is no need to duplicate the rule as per the accepted answer.

If you are using protocol less links in your content that start with '//' then this will need to be taken into account.

You may also want to be strict about how you open external links. For instance you might want to always have external links open in a new tab with the target blank approach. To do this properly you need to include target="_blank" as well as rel="noopener noreferrer" in your links. Therefore, to spot where this is not present in your markup you might want to target only the links that have the correct 'rel' attributes.