CSS Ninja Techniques – External Links Icon In Pure CSS

Use advance CSS rules to mark page’s external-links, similar to how its done in Wikipedia’s pages,

external links icon in pure CSS description image


/* 1. mark all external links (protocol prefix), 2. overwrite with "none" to avoid marking fully-qualified local-addresses.  */

a[href^="//"]:after,
a[href^="http://"]:after,
a[href^="https://"]:after {
  content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVElEQVR42n3PgQkAIAhEUXdqJ3dqJ3e6IoTPUSQcgj4EQ5IlUiLE0Jil3PECXhcHGBhZ8kg4hwxAu3MZeCGeyFnAXp4hqNQPnt7QL0nADpD6wHccLvnAKksq8iiaAAAAAElFTkSuQmCC");
  margin: 0 0 0 4px;
}

a[href^="//icompile.eladkarako.com/"]:after,
a[href^="http://icompile.eladkarako.com/"]:after,
a[href^="https://icompile.eladkarako.com/"]:after{
  content: '';
  margin: 0;
}

in my WordPress blog, I add a prefix selector, so only posts will be marked,
and other links on the page will still look intact.


.content a[href^="//"]:after,
.content a[href^="http://"]:after,
.content a[href^="https://"]:after {
  content: ......
}

here is a chance to check it,
plus the external resources I use:
//bits.wikimedia.org/static-1.25wmf14/skins/Vector/images/external-link-ltr-icon.png
//bits.wikimedia.org/static-1.25wmf14/skins/Vector/images/external-link-rtl-icon.png

as a matter of fact you can also use those few (slightly more transparent, to be less conspicuous..
external-link-ltr-icon

external-link-ltr-icon_2

external-link-ltr-icon-3

external-link-ltr-icon-4


Using SVG to draw the form is quite simple as-well:

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
    <g transform="translate(-826.429 -698.791)">
        <rect width="5.982" height="5.982" x="826.929" y="702.309" fill="#fff" stroke="#06c" />
        <g>
            <path d="M831.194 698.791h5.234v5.391l-1.571 1.545-1.31-1.31-2.725 2.725-2.689-2.689 2.808-2.808-1.311-1.311z" fill="#06f" />
            <path d="M835.424 699.795l.022 4.885-1.817-1.817-2.881 2.881-1.228-1.228 2.881-2.881-1.851-1.851z" fill="#fff" />
        </g>
    </g>
</svg>

Here are two ways of embedding the SVG (local as data:image/svg+xml and external)

.foo {

  background-image: -webkit-linear-gradient(transparent, transparent), url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cg%20transform%3D%22translate%28-826.429%20-698.791%29%22%3E%3Crect%20width%3D%225.982%22%20height%3D%225.982%22%20x%3D%22826.929%22%20y%3D%22702.309%22%20fill%3D%22%23fff%22%20stroke%3D%22%2306c%22%2F%3E%3Cg%3E%3Cpath%20d%3D%22M831.194%20698.791h5.234v5.391l-1.571%201.545-1.31-1.31-2.725%202.725-2.689-2.689%202.808-2.808-1.311-1.311z%22%20fill%3D%22%2306f%22%2F%3E%3Cpath%20d%3D%22M835.424%20699.795l.022%204.885-1.817-1.817-2.881%202.881-1.228-1.228%202.881-2.881-1.851-1.851z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E);

  background-image: -webkit-linear-gradient(transparent, transparent), url(//bits.wikimedia.org/static-1.25wmf14/skins/Vector/images/external-link-ltr-icon.svg?2015-01-07T18:48:20Z)!ie;

}