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

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/

Answer 2

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>');
}

Answer 3

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]" 
}

Answer 4

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.

Answer 5

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');    
}

Answer 6

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.