今天也一樣是要將之前的依連結的檔案類型顯示圖示改用 CSS3 再搭配個 ::after 擬元素(Pseudo-elements) 來做出一樣的效果。
每個超連結都是指到不同的檔案類型：
檢視原始碼 HTML
1 2 3 4 5 6 7 8 | <body> <ul class="abgne-menu-20140103-1"> <li><a href="http://localhost/demo.pdf">PDF檔案下載</a></li> <li><a href="http://localhost/demo.doc">Word檔案下載</a></li> <li><a href="http://localhost/demo.mp3">Mp3檔案下載</a></li> <li><a href="http://localhost/demo.zip">Zip檔案下載</a></li> </ul> </body> |
先將 ul, li 進行一下設計：
檢視原始碼 CSS
1 2 3 4 5 | .abgne-menu-20140103-1, .abgne-menu-20140103-1 li { list-style: none; margin: 0; padding: 2px; } |
筆者先以第一個超連結為例，只要透過：
檢視原始碼 CSS
1 | .abgne-menu-20140103-1 a[href$=".pdf"] |
就能找出該連結網址中是以 .pdf 結尾的元素了。接著筆者利用 ::after 擬元素(Pseudo-elements) 在其後面插入一個虛擬的元素：
檢視原始碼 CSS
1 2 3 4 | .abgne-menu-20140103-1 a[href$=".pdf"]::after { content: url(img/pdf.gif); margin-left: 5px; } |
擬元素(Pseudo-elements) 的內容是要透過 content 屬性來賦予的。若只是要顯示一般文字內容的話，直接將該字串用雙引號或單引號包起來即可。若像是圖片檔案的話，則要使用 url(uri) 的方式來插入才行。這邊的 uri 並不需要使用雙引號或單引號包裹。
若沒問題的話，結果就會變成~
那如果想將圖示加在超連結前面時，可以改用另一個擬元素 ::before。例如要針對 .doc 連結的話：
檢視原始碼 CSS
1 2 3 4 | .abgne-menu-20140103-1 a[href$=".doc"]::before { content: url(img/word.gif); margin-right: 5px } |
將將~
那會有同學問說，如果圖示都是弄成
這邊有個重點需要注意到，就是在使用 ::after 或是 ::before 時，就算沒有任何內容時，content 屬性還是要寫，但內容可以填上空字串就好。
檢視原始碼 CSS
1 2 3 4 5 | .abgne-menu-20140103-1 a[href$=".mp3"]::after { content: ""; background: url(img/csg-515dd5d0f36b8.png) no-repeat right 0; padding-left: 20px; } |
雖然是擬元素，但基本上各種 CSS 的屬性都能套用上去，就連 background 也不例外。
好好的搭配使用擬元素(Pseudo-elements)的話，還能創造出更多有趣的設計呢！
See the Pen [CSS3]用 CSS3 做設計 - 依連結的檔案類型顯示圖示 by abgne.tw (@abgne-tw) on CodePen