[轉貼]用 CSS 於連結後面加 icon (與副檔名相關小圖)
原始文章在http://plog.longwin.com.tw/programming/2007/01/14/css_attach_icon_hpyerlink_2007
通常連結是 <a href ...>, 但是都沒法一眼看出, 到底是一般連結還是某種類型的檔案(除非滑鼠移到連結上, 看檔名), 拜讀兩篇文章, 用 CSS 去判斷 副檔名 或 class name 來給他小圖.
以下參考自兩位 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")
|