偽元素在IE8之後全面都有支援,而這樣功能在CSS3可以創造出更多的效果。
偽元素介紹
在火影忍者中的鳴人,在劇情開始不久學會了強大的影分身術,透過影分身術這個忍術,鳴人可以額外創造出有戰鬥力的分身。而偽元素也是類似影分身術,在一個html的標籤內在新增至多兩個元素,透過這個元素我們可以做許多額外的變化,就像上面這個範例,鳴人是一個元素,在hover後可以再產生兩個元素,並且利用動畫來增加視覺效果。
偽元素的用法
<!--HTML--> <div class="naruto"></div>
鳴人這一個範例中,只使用了一個div
標籤,而左右兩個鳴人是是利用偽元素產生,如果需要使用偽元素,content: ""
屬性則是重點,他可以產新的元素來使用。
/*重點css code/* .naruto{ background-image: url("/images/naruto.png") position: relative; /*相對位置*/ ... } .naruto:before,.naruto:after{ /*選取.naruto的前方偽元素及後方偽元素*/ content: ""; /*產生一個空的元素*/ position: absolute; /*利用absolute定位*/ left: 150px; /*調整位置*/ background-image: (...) /*插入圖片*/ ... }
偽元素的位置
<!--HTML--> <div class="mayday">心未涼</div>
在這個部分我用純文字作範例,偽元素我們可以假想它是在div標籤中新增before
及after
標籤,而它的位置會是在div標籤內的最前方及最後方,所以在使用必須切記它的位置,或者是用position: absolute
,來忽略它所存在的位置。
<div class="mayday"> <before>淚未乾 </before> 心未涼 <after> 是什麼依然在滾燙</after> </div>
偽元素的範例
如此區塊下的陰影。
//對話框 //sass code $color: #f74b48 .box-withArrow background: $color color: white +border-radius(5px) position: relative ... &:after content: "" width: 0 height: 0 position: absolute left: 10px bottom: -20px border: transparent 10px solid border-top: $color 10px solid //繪製小箭頭,並且定位置左下方 //讓這一個框框就像是對話框呈現歌詞引用自:五月天 入陣曲
偽元素的用途多不勝數,且只要在ie8以上就能夠執行,而在本篇會特別提及的原因,就是偽元素能夠過CSS3做相當多的變化,例如旋轉、陰影、漸層色甚至是結合動態效果,且偽元素也能適當的減少html的標籤使用,讓html的維護更輕鬆。