纯 CSS 在外链后边添加图标
大部分外链都是加上了在 a 里边 target=”_blank” 用来提示用户即将访问外站，以下两种实现方法都是只用到了 CSS ，非常简单易行。
识别外链大家添加都是有很多的，下边的例子仅举部分实例。
大洋版
不动页面一丝一毫，只添加 CSS 代码：
a[href^="http://"]:not([href="example.com"]):after,
a[href^="https://"]:not([href="example.com"]):after{
content: "";
width:10px;
height:10px;
padding-right: 13px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAAH6Nf8rAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAG9JREFUeNpiYICA/3ACIIAQCCCAYEKLQQyAAIILMEMZKoyaK76CWQABBFP3HyoAUl+P1TyAAGJA1gLTxYikkhGbrv9YdCIkmBiwAIAAw2cpA9R5//F4G+wHZL9jVYgROCCbWLCYxoimiRGnX7FpBAAlLSTwUO5XcAAAAABJRU5ErkJggg==) no-repeat center right;
}以上图片编译成了base64代码，减少一次图片请求，如果对以上代码不适应，点击 这里另存为图片，并修改代码的地址。如果想更换图片的base64的话，可以在 这里生成 文件编码为base64.
如果页面有 rel=”external” 标签，判断这个更加的安全便捷可靠。
维基百科版
摘自维基百科，图片也没变，当然可以改为上边那个不动页面的。
HTML代码为：
<a href="http://www.dyniao.com" class="external">大洋鸟外链演示</a>CSS代码为：
.external{padding-right: 13px;background-position: center right;background-repeat: no-repeat;background-image: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);}--- EOF ---