纯 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 ---
订阅本站:feed
原创文章,转载请注明来源:大洋鸟 » 《纯 CSS 在外链后边添加图标》

留下评论

电子邮件地址不会被公开。 必填项已用*标注

冀ICP备17005573号-1