偽元素在css3的寫法是::after，都是以雙冒號開頭，而css2的寫法則是這樣:after，並且需要把偽元素（pseudo element）和偽類（pseudo classes）區分開來，他們擁有偽類的寫法，但是卻不是偽類，目前已知的偽元素就只有5個，分別是before,after,first-line,first-letter,selection，更多詳情這裡→pseudo elements一般情況下我們見得最多得就是偽類，比如我們一開始寫css重置樣式的時候最最最常用到的是鏈結重置：
a:hover,這個就是典型的偽類，關於更多偽類知識，不妨點選右側→pseudo-classes。a:link,
a:visited,
a:active
偽元素的用法目前最多的應該是 清除浮動、圖示製作這些，但是不管是當做什麼用途，其真正意義應該是為css生成內容助力，一般這些用到偽元素的地方都會用到content內容生成屬性，所以暫且就這麼認為吧，雖然:selection選擇偽元素不常跟，但是對於after,before這種常用偽元素就經常跟content屬性在一起了。
對於偽元素的研究，各位可以前往鑫哥的部落格，他對偽元素的研究更加的細緻和透徹→張鑫旭對偽元素研究，看完了這些文章估計你會對這類元素頗有一番醐醍灌頂的趕腳哈。
最終demo→仿蘋果導航按鈕
其實就是利用偽元素before,after來構造乙個圖形，因為沒有利用任何的都是基於css**來寫，因此當點選按鈕之後的**需要借助transform變形屬性。
當前按鈕的效果
點選之後的效果
最終效果如下：
css
.btnhtml+js.cur,.hover
.cur:before,.cur:after,.hover:before,.hover:after
.cur:before
.cur:after
.hover
.hover:before
.hover:after
html你也許肯定猜想不到這貨還可以來構造乙個偽造的**，這真心不是蓋的，不信自個前往美團手機網，如圖：jq
這個三列的**就是用:after+:before偽元素來偽造出來的，偽元素這個稱號給得真心沒有白給。具體的樣式，各位自個去研究哈，大同小異，記得不要忘記content
**：
利用偽元素 after清除浮動
讓頁面呈現多列布局時經常會使用 float left right 可是浮動布局會導致父元素的高度為0 未設定高度的情況下 不會根據子元素的高度而變化，另外，後面不需要浮動想在下一行顯示的標籤出現在浮動元素的後面。所以我們在使用浮動進行布局的時候會需要乙個塊級元素 行內元素無效 來設定 clear 屬...
偽元素 偽類
偽元素在dom中建立了一些抽象元素，而且這些元素本身時不存在與dom中的。在css3中偽元素前要使用 兩個冒號 比如 使用在使用 before 和 after時，要使用content進行內容設定。預設情況下，偽元素插入的內容為行內元素，不過可以使用display進行設定。注意 同時只能使用乙個偽元素...
偽類 偽元素
偽類和偽元素在web開發中用的好的話，可以說猶如神助。但一定要分清楚，什麼是偽類，什麼是偽元素。如何區分偽元素與偽類？答 偽元素在html文件渲染後，頁面中有相應的內容顯示，同時能夠設定它的樣式，而偽類只能設定樣式 偽元素和元素的區別？答 很明顯，從字面意思上來說，偽元素就不是真正的元素，而只有形而...