css的外链写法,纯CSS代码为外链增加图标

前面一篇文章《wordpress纯代码实现外链自动增加rel=external并显示》讲述了如何在wordpress中自动识别外面并增加外面图标，今天教大家纯CSS代码实现为外链增加图标：

最原始的方式是增加一个external类来显示外链图标，缺点是须手工或js在每个外部链接上添加类。CSS3出现以后事情就简单多了- 属性选择器

第一步：

使用 [att^=val] 属性选择器寻找以文本 http: 开头的所有链接

a[href^="http:"]{

background: url(link_external.png) no-repeat right center;

padding-right:16px;

}

这样所有以HTTP开头的链接都加上了外链图标，但有时站内链接使用绝对 URL 而不是相对 URL 的内部链接，为了避免这个问题，需要重新设置指向自己站点的所有链接。

第二步：

a[href^="http://hujuntao.com"],a[href^="http://www.hujuntao.com"]{

background-image:none;

padding-right:0;

}

同样的道理你可以为EMAIL、图片、文档增加个性图标：

a[href^="mailto:"]{

background: url(images/email.png) no-repeat right top;

padding-right:10px;

}

a[href$=".pdf"]{

background: url(images/pdfLink.png) no-repeat right top;

padding-right:10px;

}

a[href$=".doc"]{

background: url(images/pdfLink.png) no-repeat right top;

padding-right:10px;

}

a[href$=".rss"], a[href$=".rdf"]{

background: url(images/feedLink.png) no-repeat right top;

padding-right:10px;

}

a[href$=".jpg"], a[href$=".png"], a[href$=".gif"]{

background: url(images/imageLink.png) no-repeat right top;

padding-right:10px;

}