CSS中有一個特性允許我們添加額外元素而不擾亂文檔本身，它們是以CSS選擇器的形式出現的，具有標簽的表現效果，但是呢又不是真正的標簽元素，所以叫做“偽元素”。下面就說一下常見的兩個偽元素before和after。
一、偽元素基本用法
在CSS選擇器中加上相應偽類選擇符就可以了，像這樣：#example: before或者#example: after，這里是使用ID選擇器，比如下面的CSS代碼：
#example:before { content: "\""; } #example:after { content: "\""; }
它的效果就是為example標簽前后加上雙引號。
和偽類的選擇符很像，但是有一點小區別，就是偽類選擇符實際上是用兩個冒號，::before的形式，以和偽類區別開，但是只用一個冒號瀏覽器也是可以識別的，在CSS3中規定是一個冒號就可以了。
如果沒有綁定標簽，像這樣：:before{ content:”=”;} 這樣的偽元素是沒有意義的,代碼會在DOM里的每個元素的內容之前插入散列符號。即使你刪除了<body>標簽和它的所有內容，你仍會在頁面上看見兩個散列符號：一個在<html>里，另一個在<body>標簽里。
那么可不可以給偽元素再添加偽元素呢？比如下面這個代碼：
#example:after:after{ content: "after"; }
在瀏覽器中刷新，測試一下會發現什么也沒有顯示，也就是說再給偽元素添加偽元素目前很多瀏覽器上是無效的，瀏覽器忽略掉該定義，只能識別一層偽元素，但是既然可以偽元素添加偽元素，可以期待再為偽元素添加偽元素，其表現力是很強的。
二、偽元素屬性和樣式
1.content屬性
每個偽元素必須要有content屬性，否則的話瀏覽器不能識別，你可以為content屬性添加空引用作為它的值(即:content:“”)。
你也可以為content包含一個指向一個圖像的URL，就像在css里包含一個背景圖像一樣：
p:before { content: url(image.jpg); }
也可以包含一個Data URI代替圖像引用，就像使用css背景一樣。
你還可以選擇ATRR(X)中的函數的形式。“把X屬性的值以字符串的形式返回”，比如：
a:after { content: attr(href); }
attr()函數的功能是把得到特定屬性的值並把它作為插入的文本成為一個偽元素。
上面的代碼會導致頁面上的每一個<a>元素的href值立即被放置在每個各自的<a>元素的后面。在文檔被打印時，它可以用作一個包含所有URl的打印樣式表。
2.標簽屬性
偽元素也是元素，所以你可以為它添加大部分其他元素具有的屬性，比如定位屬性，字體屬性，背景屬性和盒模型的屬性等，另外由於偽元素默認是內聯元素，所以如果要使得盒模型中的height等屬性有效的話，必須要把它轉化為塊元素，具體就是設置其display屬性為block,或者設置為float等。如下：
#example:after{ position: absolute; display: block; left: 20px; top: 20px; content: "\""; width: 20px; height: 20px; background: #6F3; }
既然偽元素可以定義position等屬性，那么before和after的約束就很有限了，before和after的區別只能是在沒有特殊定義偽元素的位置等信息的時候的默認行為不一致，before出現在相對綁定的元素之前，而after出現在相對綁定的元素位置之后。
另外既然可以為偽元素定義盒子模型的屬性，就不得不說，偽元素默認為其目標元素的子元素，比如#example:after，偽元素after的父元素就是#example選擇符對應的元素，它具有一般子元素盒模型的特性，即為他定義的height和width等屬性規則為影響目標元素的規則。
三、偽元素的兼容性
基本可以放心的使用偽元素，因為它有很好的兼容性，可以不用加瀏覽器前綴而很好的使用它。
支持:before 和 :after 偽元素的瀏覽器有：
- Chrome 2+,
- Firefox 3.5+ (3.0 had partial support),
- Safari 1.3+,
- Opera 9.2+,
- IE8+ (with some minor bugs),
- 幾乎所有的移動瀏覽器。
但是IE6和IE7上並不支持，如果不是很在意他們的用戶數量的話，基本可以很自由的使用啦。
四、偽元素的作用
這里借用Thoriq Firdaus的幾個例子簡單說一下偽元素的用法。另外偽元素既然是偽元素，那么作為結構與表現分離的一種實現，其作用應該是對文本起到很好的修飾作用，而不是把它用來表現文本。
陰影效果
使用 偽元素:before 和 :after 。它們兩個都是絕對定位，而且使用負z-index來放置到圖片后方實現陰影效果。
3D按鈕
利用偽元素結合CSS3 box-shadow 來繪制一個令人吃驚的3D按鈕，僅僅使用了CSS和單一的錨文本。偽元素:before 被用來在按鈕的左側添加數字“1”。
疊加圖像效果
使用偽元素來僅僅依靠一個圖片標簽創建一個“凌亂的”疊加圖像效果也是可能的。偽元素用於建立一個圖片疊加的錯覺，通過使用z-index負值使“疊加”的圖片在真正的圖片后面來實現。
