偽元素在IE8之後全面都有支援，而這樣功能在CSS3可以創造出更多的效果。

圖片來源：動畫 火影忍者

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-09-22 (建議使用Chrome瀏覽器)
偽元素在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的維護更輕鬆。