CSS method for adding "new window" icon to external links

Use this CSS to add the "opens in a new window" icon to all external links:

icon: open in new window

icon: open in new window

Options:

Copy the selected HTML code below,
and paste it into your own web page:


a[href^="http://"]:after, a[href^="https://"]:after, a[href^="//"]:after {
    background: url('/images/open-in-new-window.png') center/contain;
    width: 0.8em;
    height: 0.8em;
    display: inline-block;
    content: " ";
    margin-left: 2px;
    color: transparent;
}

Note that you will need to revert to Javascript (or jQuery) if you want to add the actual "target=_blank" attribute to these links. I typically add this manually, but you may prefer to have a bit of code in place to make sure that it's always there. Another approach is to simply assign the new-window icon to all links that contain the new-window attribute:


a[target="_blank"]:after {
    background: url('/images/open-in-new-window.png') center/contain;
    width: 0.8em;
    height: 0.8em;
    display: inline-block;
    content: " ";
    margin-left: 2px;
    color: transparent;
}

Exemptions

To exclude certain links from this styling, simply over-ride it. For example, I don't want my "social share" links to have the new-window icon after them, so I do this:


a.share:after {
    background: none !important;
    display: none !important;
}

See it in action!


Comments

It's quiet in here...Add your comment