CSS: Style external links

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

.post p a[href^="h开发者_如何学编程ttp://"]:after

But Wordpress put the entire url in the links... So, how could I style all links that doesn't start with http://www.mywebsite.com ?

Thank you.

2021 Solution

a[href]:not(:where(
  /* exclude hash only links */
  [href^="#"],
  /* exclude relative but not double slash only links */
  [href^="/"]:not([href^="//"]),
  /* domains to exclude */
  [href*="//stackoverflow.com"],
  /* subdomains to exclude */
  [href*="//meta.stackoverflow.com"],
)):after {
  content: '↗️';
}

<strong>Internal sites:</strong>
<br>Lorem <a href="http://stackoverflow.com">http://stackoverflow.com</a> ipsum
<br>Lorem <a href="/a/5379820">/a/5379820</a> ipsum
<br>Lorem <a href="//stackoverflow.com/a/5379820">//stackoverflow.com/a/5379820</a> ipsum
<br>Lorem <a href="http://stackoverflow.com/a/5379820">http://stackoverflow.com/a/5379820</a> ipsum
<br>Lorem <a href="https://stackoverflow.com/a/5379820">https://stackoverflow.com/a/5379820</a> ipsum
<br>Lorem <a href="https://meta.stackoverflow.com/">https://meta.stackoverflow.com/</a> ipsum
<br>Lorem <a href="ftp://stackoverflow.com">ftp://stackoverflow.com</a> ipsum

<br><br>
<strong>External sites:</strong>
<br>Lorem <a href="ftp://google.com">ftp://google.com</a> ipsum
<br>Lorem <a href="https://google.com">https://google.com</a> ipsum
<br>Lorem <a href="http://google.com">http://google.com</a> ipsum
<br>Lorem <a href="https://www.google.com/search?q=stackoverflow">https://www.google.com/search?q=stackoverflow</a>
<br>Lorem <a href="//www.google.com/search?q=stackoverflow">//www.google.com/search?q=stackoverflow</a>

<br><br>
<strong>Other anchor types</strong>
<br>Lorem <a>no-href</a> ipsum
<br>Lorem <a href="#hash">#hash</a> ipsum

2014 Solution

Using some special CSS syntax you can easily do this. Here is one way that should work for both the HTTP and HTTPS protocols:

a[href^="http://"]:not([href*="stackoverflow.com"]):after,
a[href^="https://"]:not([href*="stackoverflow.com"]):after {
  content: '↗️';
}

This way shows external links ALA Wikipedia:

a[href^="http"]:after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
}

​An example can be found here: http://jsfiddle.net/ZkbKp/

One simple rule, no hardcoding involved:

a[href*="//"] { /* make me do stuff */ }

Works for all schemes. Has the added benefit of identifing mistyped internal URLs. For cloaked internal links redirecting externally, simply prefix the relative URL with //.

Credit goes to Mark Battistella who left this snippet on CSS-Tricks in 2012.

Update: Based on actual use I've personally found the above problematic as it styles all absolute links which can lead to unexpected styling in some situations (e.g. In Brave, when you download a page for offline viewing). My suggestion is to use a[rel*="external"]::after instead and decorate your external links.

I combined @superlogical + @Shaz to make something for my Foundation WP theme...

a[href^="http://"]:not([href*="maggew.com"]):after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);    
}

You can use this HTML snippet to test on your site:

<a href="http://gebfire.com" target="_blank">External</a>

This is what I used for a custom image (like a favicon)

a[href^="http://"]:not([href*="magew.com"]):after {
     content: " " url('/wp-content/uploads/2014/03/favicon.png');    
}

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,\
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-24 -24 48 48"> \
            <defs> \
                <mask id="corner"> \
                    <rect fill="white" x="-24" y="-24" width="48" height="48"></rect> \
                    <rect fill="black" x="2" y="-24" width="22" height="26"></rect> \
                </mask> \
            </defs> \
            <g stroke="blue" fill="blue" stroke-width="4"> \
                <rect x="-20" y="-16" width="32" height="32" rx="7" ry="7" stroke-width="3" fill="none" mask="url(%23corner)"/> \
                <g transform="translate(1,0)" stroke-linecap="square"> \
                    <line x1="0" y1="0" x2="17" y2="-17" stroke-width="6"/> \
                    <polygon points="21 -21, 21 -8, 8 -21" stroke-linejoin="round" stroke-width="3"/> \
                 </g> \
             </g> \
        </svg>');

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.

Suppose you are setting the target for external links by <a href='http://' target='_blank'>Justin Bieber Fan Club</a> , You can do play:

CSS:

a[target="_blank"]:after{
     content: " [external]" 
}

This is how you can style external links with a favicon image:

a[href*="http"] {
    background: url('favicon.png') no-repeat 100% 0;
    background-size: 16px 16px;
    padding-right: 19px;
}

We set the path to the image we want to insert, specify no-repeat so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.

I like the approach @henryscat shared, but not being an SVG expert I struggled to change the icon. To make it easier for me, I removed the mask and created the icon using lines only. The comment in front of the icon definition describes which <line/> is which part of the icon.

a[target="_blank"]::after {
    content: '';
    background: no-repeat var(--icon-external-link);
    padding-right: 1em;
}

:root {
    /*
    line left
    line right
    line bottom
    line top
    arrow left
    arrow right
    arrow diagonal
    */
    --icon-external-link: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> \
        <g style="stroke:blue;stroke-width:1"> \
            <line x1="5" y1="5" x2="5" y2="14" /> \
            <line x1="14" y1="9" x2="14" y2="14" /> \
            <line x1="5" y1="14" x2="14" y2="14" /> \
            <line x1="5" y1="5" x2="9" y2="5"  /> \
            <line x1="10" y1="2" x2="17" y2="2"  /> \
            <line x1="17" y1="2" x2="17" y2="9" /> \
            <line x1="10" y1="9" x2="17" y2="2" style="stroke-width:1.5" /> \
        </g> \
    </svg>');
}