纯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;
}

“纯CSS代码为外链增加图标”的2个回复

发表评论

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