卡卡網(wǎng)

在網(wǎng)頁上的外部鏈接旁邊放置一個出站鏈接圖標會很有用的，這很容易使用CSS實現(xiàn)，而無需向錨標記添加任何其他元素或向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

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

有兩個注意的地方：

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

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

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

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

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

您可能對以下文章也感興趣

• css背景圖實現(xiàn)文字鏈右邊加一個箭頭圖標

標簽: css  href  鏈接