Home » CSS3 應用

[CSS3]用 CSS3 做設計 - 依連結的檔案類型顯示圖示

範例 1
範例 2
沒錯!只要 300 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

今天也一樣是要將之前的依連結的檔案類型顯示圖示改用 CSS3 再搭配個 ::after 擬元素(Pseudo-elements) 來做出一樣的效果。

每個超連結都是指到不同的檔案類型:

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 進行一下設計:

1
2
3
4
5
.abgne-menu-20140103-1, .abgne-menu-20140103-1 li {
	list-style: none;
	margin: 0;
	padding: 2px;
}

筆者先以第一個超連結為例,只要透過:

1
.abgne-menu-20140103-1 a[href$=".pdf"]

就能找出該連結網址中是以 .pdf 結尾的元素了。接著筆者利用 ::after 擬元素(Pseudo-elements) 在其後面插入一個虛擬的元素:

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 並不需要使用雙引號或單引號包裹。

若沒問題的話,結果就會變成~
css3-link-icon-of-file-type-0

那如果想將圖示加在超連結前面時,可以改用另一個擬元素 ::before。例如要針對 .doc 連結的話:

1
2
3
4
.abgne-menu-20140103-1 a[href$=".doc"]::before {
	content: url(img/word.gif);
	margin-right: 5px
}

將將~
css3-link-icon-of-file-type-1

那會有同學問說,如果圖示都是弄成 CSS Sprites 的話,那要怎麼做呢?content 要填什麼呢?

這邊有個重點需要注意到,就是在使用 ::after 或是 ::before 時,就算沒有任何內容時,content 屬性還是要寫,但內容可以填上空字串就好。

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 也不例外。
css3-link-icon-of-file-type-2

好好的搭配使用擬元素(Pseudo-elements)的話,還能創造出更多有趣的設計呢!

See the Pen [CSS3]用 CSS3 做設計 - 依連結的檔案類型顯示圖示 by abgne.tw (@abgne-tw) on CodePen

範例 1 範例 2 範例 3

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響