如果你一直密切關注著各種網頁設計的博客，你可能已經注意到了:before和:after偽元素已經在前端開發中獲得了相當多的關注。特別是在Nicolas Gallagher的博客中，后期運用了很多偽類元素。
Nicolas Gallagher使用偽元素用靜態的HTML標簽創建84個GUI圖標。
為了補充說明上述內容(和利用當前發展的趨勢)，我收集一些完全在偽元素下運行的東西。本文主要針對這一類人群，即已經看到了用偽元素做出了很酷的東西，但想知道所有有關before在css技術里的運用。
盡管css 規范中包含其他的偽元素，我們焦點是 :before 和 :after。因此，為了簡便起見，我所說的“偽元素”泛指這兩個特別的偽元素。
偽元素能做什么呢？
“偽元素”，顧名思義。它創建了一個虛假的元素，并插入到目標元素內容之前或之后。
單詞“pseudo”是希臘語的英譯，它的基本意思是“說謊的，不誠實的，錯誤的。”因此叫偽元素是適合的。因為在文檔中它不實際改變什么。相反的，它們是像幽靈一般的元素插入在css中，他們對用戶是可見的，可以通過css控制。
基本語法
:before 和 :after 偽元素編碼非常簡單(和大多數的css屬性一樣不需要一大堆的前綴)。這里是一個簡單的例子。
這個例子中提到了兩件事情，第一，我們用#example:before和#example:after來目標鎖定相同的元素.嚴格的說，在代碼中他們是偽元素。
第二，在內容模塊中提到，偽元素如果沒有設置“content”屬性，偽元素是無用的。
在這個例子中，擁有屬性id的元素將有一個哈希符號放置內容之前，和一個句號在內容之后。
語法筆記
你可以設置content屬性值為空，并且僅僅把他當做一個內容很少的盒子。像這樣:
新聞熱點
疑難解答
