層疊樣式表（css）的主要目的是給html元素新增樣式，然而，在一些案例中給文件新增額外的元素是多餘的或是不可能的。事實上css中有乙個特性允許我們新增額外元素而不擾亂文件本身，這就是「偽元素」。
關於語法和瀏覽器支援
偽元素實際上在css1中就存在了，但是我們現在所討論的:before和:after則發布於css2.1中。在最初，偽元素的語法是使用「:」（乙個冒號），隨著web的發展，在css3中修訂後的偽元素使用「::」（兩個冒號），也就是::before 和 ::after—以區分偽元素和偽類（比如:hover，:active等）
簡而言之，偽元素將會在內容元素的前後插入額外的元素，因此當我們新增它們時，使用以下的標記方式，他們在技術上是平等的。但是這些元素實際上並不在文件中生成。它們將在外部可見，但是你將不會在文件的源**中找到它們，因此，實際上它們是「虛假」的元素；
使用
使用偽元素是相對容易的，:before將會在內容之前「新增」乙個元素而:after將會在內容後「新增」乙個元素。在它們之中新增內容我們可以使用content屬性。
偽元素樣式
儘管作為「虛假」的元素，事實上偽元素表現上就像是「真正」的元素，我們能夠給它們新增任何樣式，比如改變它們的顏色、新增背景色、調整字型大小、調整它們中的文字等等。
預設生成的元素是乙個內聯元素，於是當我們想要指定它們的高度和寬度的時候，我們首先不得不使用display: block把它們宣告為塊級元素。 由於已經設定float，所以無需設定display:black。
在**中，我們仍然申明了content，，而且此時使用了空字串。content屬性是必須的而且應該經常被應用。否則，偽元素無論如何都無法正常工作。
結論
偽元素很酷同時也是可應用到實際工作中的，基本上，每乙個我們所新增的元素都不會干擾現有的html結構，而且偽元素可以做到 幾乎所有我們能想到的事情。
實際上有一些偽元素的改進工作,目前逐步進行，比如偽元素巢狀div::before::before 以及多重偽元素div::before(3) 。很顯然，在未來的web設計中，這些改進會讓我們的設計有更多的形式（更多的可能性）。然而，他們將會在最新的瀏覽器中得到支援，讓我們現在耐心的等待吧！
理解偽元素 Before 和 After
層疊樣式表 css 的主要目的是給html元素新增樣式，然而，在一些案例中給文件新增額外的元素是多餘的或是不可能的。事實上css中有乙個特性允許我們新增額外元素而不擾亂文件本身，這就是 偽元素 你一定聽說過這個詞，尤其是當你一直關注著我們的教程。點此瀏覽原作者的其他文章 事實上，的確有一些css家族...
理解偽元素 before 和 after
層疊樣式表 css 的主要目的是給html元素新增樣式，然而，在一些案例中給文件新增額外的元素是多餘的或是不可能的。事實上css中有乙個特性允許我們新增額外元素而不擾亂文件本身，這就是 偽元素 你一定聽說過這個詞，尤其是當你一直關注著我們的教程。點此瀏覽原作者的其他文章 事實上，的確有一些css家族...
理解偽元素 before 和 after
層疊樣式表 css 的主要目的是給html元素新增樣式，然而，在一些案例中給文件新增額外的元素是多餘的或是不可能的。事實上css中有乙個特性允許我們新增額外元素而不擾亂文件本身，這就是 偽元素 你一定聽說過這個詞，尤其是當你一直關注著我們的教程。點此瀏覽原作者的其他文章 事實上，的確有一些css家族...