本文主要講解css偽元素的用法，有需要的朋友可以閱讀此文。本文講解的偽元素有：before,after.
什么是偽元素（Pseudo element）？
偽元素不是真正的元素，不存在與文檔之中，所以js無法操作他。那為什么叫他“元素”？因為我們可以對其進行跟元素幾乎無差別的操作。
偽元素有哪些？
before,after,first-letter,first-line。
我們為什么需要偽元素？
偽元素是創造關於文檔語言能夠指定的文檔樹之外的抽象。例如文檔語言不能提供訪問元素內容第一字或者第一行的機制。偽元素允許設計師引用它們，否則這是難以辦到的。偽元素還提供樣式設計師給在源文檔中不存在的內容分配樣式（例如：:before和:after能夠訪問產生的內容）——百度百科。
怎樣表示偽元素?最好使用雙冒號，防止與偽類混淆。
hey::before{
}
hey::after{
}
before與after的用法總結
before定位的基准是其主元素的右上角，after定位的基准是主元素的結尾處。當主元素沒有內容時before與after仍會正常工作，屬性為inline元素，若需要設置高寬度等屬性需要display：block;。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ border:1px red solid; } p:before{content: "hey "; position: relative; left: 20px;} p:after{content: "you are handsome!"; position: relative； left:20px; } </style> </head> <body> <p>安靜!</p> </body> </html>
content是偽元素必需的屬性，其內容可以分為幾類：字符串/attr/url/counter(計算器)。若偽元素沒有內容，需賦值為空格：content:' ';
<h2></h2> <h2></h2> <style> body {counter-reset:section;} h2:before { counter-increment: section; content: "Chapter" counter(section) "."; } </style>
before與after的主要用途是對元素默認樣式的的美化：美化時需要結合定位於內容。一般講主元素設置為position：relative，偽元素設置為position：absolute，以方便對偽元素定位。
a { position: relative; display: inline-block; outline: none; text-decoration: none; color: #000; font-size: 32px; padding: 5px 10px; } a:hover::before, a:hover::after { position: absolute; } a:hover::before { content: "\5B"; left: -20px; } a:hover::after { content: "\5D"; right: -20px; }
更多效果點這里：這里這里
對checkbox/radio美化：
.magic-checkbox { position: absolute; display: none; //先隱藏真正的checkboxbox } .magic-checkbox + label {//為與checkbox搭配的label使用樣式 position: relative; //相對定位，方便其內容的偽元素進行定位 display: block; //塊元素 padding-left: 30px; cursor: pointer; vertical-align: middle; } .magic-checkbox + label:before { //label添加:before偽元素，用於生成一個帶邊界的正方形，模擬復選框的輪廓 position: absolute; top: 0; left: 0; display: inline-block; width: 20px; height: 20px; content: ''; border: 1px solid #c0c0c0; border-radius: 3px; } //為checkbox添加:after偽元素，作用是生成一個√圖形，模擬checkbox選中狀態，未選中狀態下會被隱藏 .magic-checkbox + label:after { top: 2px; left: 7px; box-sizing: border-box; width: 6px; //實現√圖形很簡單：設置一個長方形，去掉其上邊界和左邊界，剩下的2個邊界旋轉45度就得到√形狀 height: 12px; transform: rotate(45deg); border-width: 2px; border-style: solid; border-color: #fff; border-top: 0; border-left: 0; position: absolute; display: none; //√形狀先隱藏 content: ''; } //單擊label，隱藏的checkbox為checked狀態，這時設置checked狀態下搭配label的:before偽元素背景和邊界顏色 .magic-checkbox:checked + label:before { animation-name: none; border: #3e97eb; background: #3e97eb; } //checked狀態的checkbox搭配的label偽元素:after此時設置顯示，那么√就顯示出來了 .magic-checkbox:checked + label:after { display: block; }
實際效果點擊：這里這里
利用:after屬性還可以對主元素進行批注：
.empty__bg { display: inline-block; width: 95px; height: 92px; background: url(http://7tszky.com1.z0.glb.clouddn.com/FvD_sYY4Fmp_yKS0E07H-5jhuKTB) no-repeat; background-size: 95px 92px; position: relative; margin-bottom: 16px;/*注意這里需要留好位置放置after元素（它是absolute進去的）*/ } .empty__bg:after { content: "暫無學習計划"; display: block; font-size: 14px; line-height: 24px; text-align: center; width: 100%; color: #909090; position: absolute; top: 100%; left: 0; } }
參考文章：
如需轉載請注明文章出處：http://www.cnblogs.com/lflj/