技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

CSS實現在外部鏈接后面添加一個出站鏈接圖標

作者:admin    時間:2019-5-7 14:46:12    瀏覽:

在網頁上的外部鏈接旁邊放置一個出站鏈接圖標會很有用的,這很容易使用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^="//"] {
  background: url(/images/external.png) center right no-repeat;
  padding-right: 13px;
}

execcodegetcode

現在,這將使以//開頭的網頁中的所有鏈接都具有外部鏈接圖標。

有兩個注意的地方:

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

例如,要為我的博客執行此操作,您可以執行以下操作:

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

2)它無法在Internet Explorer 6中運行。但是,你不用關心,IE6已經沒人用了。

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

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

標簽: css  href  鏈接  
  • IT熱文
  • 站長推薦
{ganrao} 25选5开奖时间 黑桃棋牌游戏 腾讯欢乐捕鱼有辅助吗 新开棋牌游戏平台? 欧冠联赛积分榜 怎么通过互联网赚钱 博贝棋牌娱乐 世界足球排名 网络挣钱的几种方法 下载四川熊猫麻将下 欢乐捕鱼电玩版街机版 极速赛车app官方版 nba贴吧 如何开网店赚钱 宝博棋牌app官网下载安装 网赌id控制玩家图