卡卡網(wǎng)

在網(wǎng)頁(yè)上的外部鏈接旁邊放置一個(gè)出站鏈接圖標(biāo)會(huì)很有用的，這很容易使用CSS實(shí)現(xiàn)，而無(wú)需向錨標(biāo)記添加任何其他元素或向HTML源添加其他圖像標(biāo)記。

使用出站鏈接圖標(biāo)的外部鏈接的示例是這樣的：

用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

但是，這個(gè)解決方案要求您確保始終在您的<a>標(biāo)簽中放置class ="external"，這很容易忘記。 相反，你可以像這樣使用一點(diǎn)CSS：

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

execcodegetcode

現(xiàn)在，這將使以http://開頭的網(wǎng)頁(yè)中的所有鏈接都具有外部鏈接圖標(biāo)。

有兩個(gè)注意的地方：

1）以http://開頭并包含您自己的域名的任何指向您自己網(wǎng)站的鏈接都將具有外部鏈接圖標(biāo)。我能弄清楚如何解決這個(gè)問題的唯一方法是使規(guī)則匹配以http://和網(wǎng)站域開頭的鏈接，將背景和填充設(shè)置回默認(rèn)值。

例如，要為我的博客執(zhí)行此操作，您可以執(zhí)行以下操作：

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

2）它無(wú)法在Internet Explorer 6中運(yùn)行。但是，你不用關(guān)心，IE6已經(jīng)沒人用了。

另外，使用Javascript也可以做到這一點(diǎn)，Javascript可以作為后備使其適用于Internet Explorer 6。

您可能對(duì)以下文章也感興趣

• css背景圖實(shí)現(xiàn)文字鏈右邊加一個(gè)箭頭圖標(biāo)

標(biāo)簽: css  href  鏈接