3米免费资源部落

大家也许注意到了:本博客文章页面中的外链后面都带了一个橙色的小图标，这样用户就很明显的知道，这是非3米部落的内部链接，这样对提升用户体验有一定的好处。下面就把该方法分享出来。

把博客外部链接加上小图标，让访客更加容易的分辨外部链接，而且也美观好看。
大家先看看这个效果：诱果时尚馆 注意到了吧？它在外部链接旁边加一个小图标，而且对于离站链接的图标已经出现了一种约定：一个框加一个箭头。

实现这种效果最容易的方法是在所有外部链接上加一个类，然后将图标作为背景图像应用。
.external{
background: url(images/externalLink.gif) no-repeat right top;
padding-right:10px
}
如上面的示例中，给链接设置少量的右填充，从而给图标留出空间，然后将图标作为背景图像应用于右上角。尽管这个方法是有效的，但必须手工地在每个外部链接上添加类，有办法让 CSS 判断链接是否是外部链接吗？确实有办法，我们可以用属性选择器。

CSS3 扩展了属性选择器的功能，提供了子字符串匹配属性选择器，这些选择器允许通过对属性值的一部分和指定的文本进行匹配来寻找元素。

这种技术的工作方式是使用 [att^=val] 属性选择器寻找以文本 http: 开头的所有链接：
a[href^="http:"]{
background: url(images/externalLink.gif) no-repeat right top;
padding-right:10px;
}

这应该会突出显示所有的外部链接，但也会选中使用绝对 URL 而不是相对 URL 的内部链接，为了避免这个问题，需要重新设置指向自己站点的所有链接。
a[href^="http://yoursite.com"],a[href^="http://www.yoursite.com"]{
background-image:none;
padding-right:0;
}

大多数符合标准的浏览器都支持这种技术，而老式浏览器（比如 IE6 和更低版本）会忽略它。
当然，我们还可以扩展这种技术，如对邮件也进行突出显示。
a[href^="mailto:"]{
background: url(images/email.png) no-repeat right top;
padding-right:10px;
}

我们还可以用 CSS 选择器来区分一些下载链接，如一个 PDF 或 Word 文档。这要使用 [att$=val] 属性选择器，它寻找以特定值结尾的属性：
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;
}

类似的还有 RSS(feec) 链接：
a[href$=".rss"], a[href$=".rdf"]{
background: url(images/feedLink.png) no-repeat right top;
padding-right:10px;
}

本博客的写法：

/* external links START */
.post .content a[href^="http:"]{
background: url(img/external.gif) no-repeat right;
padding-right:13px;
}
.post .content a[href^="http://mmm.eu5.org"],.post .content a[href^="http://www.mmm.eu5.org"],.post .content a[href^="http://blog.seomaven.org"]{
background-image:none;
padding-right:0;
}
.post .content a[href$=".jpg"],.post .content a[href$=".gif"],.post .content a[href$=".png"]{
background-image:none;
padding-right:0;
}
/* external links END */

这些技术都有助于改进用户在站点上的浏览体验，让用户明确地了解单击链接时会发生的情况，避免不必要的取消操作和烦恼。

但本方法对 IE6 没有效果，而且还要注意的是对于用图片做的外链也会带有一个小图标。

以上方法来自：用CSS为外链添加图标