用 CSS 於連結後面加 icon (與副檔名相關小圖)

通常連結是 <a href ...>, 但是都沒法一眼看出, 到底是一般連結還是某種類型的檔案(除非滑鼠移到連結上, 看檔名), 拜讀兩篇文章, 用 CSS 去判斷 副檔名 或 class name 來給他小圖.

目前我也在副檔名是 pdf 的加上小圖, 其它的以後有空再來改~ :p

以下參考自兩位 CSS 大師的文章:

使用 CSS 於 連結後面 加入 icon 的方法如下:(此為我的範例)

a[href $='.pdf'] {
    padding-right: 18px;background: transparent url(/images/icon_pdf.gif) no-repeat center right;
}
a[href $='.doc'] {
    padding-right: 18px;background: transparent url(/images/icon_doc.gif) no-repeat center right;
}
a[href $='.xls'] {
    padding-right: 18px;background: transparent url(/images/icon_xls.gif) no-repeat center right;
}
a[href ^="mailto:"] {
    padding-right: 20px;background: transparent url(/images/icon_mail.gif) no-repeat center right;
}
a[class ="popup"] {
    padding-right: 18px;background: transparent url(/images/icon_popup.gif) no-repeat center right;
}
a[class ~="popup"] {
    padding-right: 18px;background: transparent url(/images/icon_popup.gif) no-repeat center right;
}
a[class ="external"] {
    padding-right: 18px;background: transparent url(/images/icon_external.gif) no-repeat center right;
}

a 後面能夠有以下幾種判斷法:

  • [foo] -- Has an attribute named "foo"
  • [foo="bar"] -- Has an attribute named "foo" with a value of "bar" ("bar")
  • [foo~="bar"] -- Value has the word "bar" in it somewhere ("blue bar stools")
  • [foo^="bar"] -- Value begins with "bar" ("barstool")
  • [foo$="bar"] -- Value ends with "bar" ("I was at the bar")
  • [foo*="bar"] -- Value has bar somewhere ("I was looking for barstools")

記得加的時後, icon 要準備好 🙂

感謝 Haoming 提供他改寫的版本(可連到他的網站下載), 超方便.

我又基於他的版本再改寫一下, 主要是針對外部連結我再秀小圖(我外部連結通常都會有 target="blank", 所以改寫如下: 

#content a[href $='.pdf'] {
    padding-right: 18px;background: transparent url(http://farm1.static.flickr.com/137/362353384_27b2da60cf_m.jpg) no-repeat center right;
}
#content a[href $='.doc'] {
    padding-right: 18px;background: transparent url(http://farm1.static.flickr.com/129/362353383_86d1c5ae90_m.jpg) no-repeat center right;
}
#content a[href $='.xls'] {
    padding-right: 18px;background: transparent url(http://farm1.static.flickr.com/150/362353380_d48d22e8f8_m.jpg) no-repeat center right;
}
#content a[href ^="mailto:"] {
    padding-right: 20px;background: transparent url(http://farm1.static.flickr.com/157/362353387_177cbdea21_m.jpg) no-repeat center right;
}
#content a[target ="_blank"] {
    padding-right: 18px;background: transparent url(http://farm1.static.flickr.com/128/362353389_fe347a775c_m.jpg) no-repeat center right;
}


關於 Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
本篇發表於 Programming。將永久鏈結加入書籤。

用 CSS 於連結後面加 icon (與副檔名相關小圖) 有 8 則回應

  1. Haoming 說道:

    真是有趣的東西,我將您的設計稍微修改一下,把圖片放在flickr 就可以讓這組CSS套用在其他BLOG。 我把做好的東西放在我的部落格。歡迎指教..
    http://blog.xuite.net/haoming/mypoint/9781355

  2. Tsung 說道:

    您改的太好用了, 感謝您的提供, 謝謝~~~ Orz...

  3. 毛豆 說道:

    您好,想請教一下
    平常css的教學裡面似乎不常看到用來判斷的語法
    我對這玩意實在很有興趣
    能請問一下它的關鍵字是什麼嗎
    想去google搜尋,卻不曉得該下什麼當key @@"

  4. Tsung 說道:

    這個應該不算是標準做法吧, 不然應該是要在 w3c 找的到才對, 我想, 你搜尋可以試試 msdn css 之類的字找找看(by broswer)~ 🙂

  5. 毛豆 說道:

    好的 謝謝 ^_^

  6. 毛豆 說道:

    大大,我找到資料了
    下面那頁就是
    http://noellab.net/ernest/tavi/index.php?page=BobChao%2FNoteBook%2FCssLv3%2FCssSelectors
    它好像被歸類在attribute selectors
    類似正規表達式的東西

  7. Tsung 說道:

    非常感謝您的提供~ 真是太棒了, 感恩 Orz...

  8. naiveman 說道:

    也可以試試看 CSS3 當作關鍵字來搜尋 另外用到的語法 就是所謂的 Regular Expression 祝 google 愉快

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料