CSS实现在外部链接后面添加一个出站链接图标

在网页上的外部链接旁边放置一个出站链接图标会很有用的，这很容易使用CSS实现，而无需向锚标记添加任何其他元素或向HTML源添加其他图像标记。

使用出站链接图标的外部链接的示例是这样的：

用HTML和CSS做这样的事情最明显的方法是这样的。

CSS

a.external {
  background: url(/images/external.png) center right no-repeat;
  padding-right: 13px;
}

HTML

<a href=”#” class=”external”>Link</a>

execcodegetcode

但是，这个解决方案要求您确保始终在您的<a>标签中放置class ="external"，这很容易忘记。 相反，你可以像这样使用一点CSS：

a[href^=”http://”] {
  background: url(/images/external.png) center right no-repeat;
  padding-right: 13px;
}

execcodegetcode

现在，这将使以http://开头的网页中的所有链接都具有外部链接图标。

有两个注意的地方：

1）以http://开头并包含您自己的域名的任何指向您自己网站的链接都将具有外部链接图标。我能弄清楚如何解决这个问题的唯一方法是使规则匹配以http://和网站域开头的链接，将背景和填充设置回默认值。

例如，要为我的博客执行此操作，您可以执行以下操作：

a[href^=”http://www.webkaka.com”] {
  background: none;
  padding-right: 0;
}

2）它无法在Internet Explorer 6中运行。但是，你不用关心，IE6已经没人用了。

另外，使用Javascript也可以做到这一点，Javascript可以作为后备使其适用于Internet Explorer 6。

您可能对以下文章也感兴趣

• css背景图实现文字链右边加一个箭头图标