css引入偽類和偽元素概念是為了格式化文件樹以外的資訊。也就是說，偽類和偽元素是用來修飾不在文件樹中的部分，例如，一句話中的第一個字母，或是列表中的第一個元素，又或者是滑鼠懸停在某個超連結上時要設定的樣式。
什麼是偽元素？
偽元素：用於建立一些不在文件樹中的元素，並為其新增樣式。實際上，偽元素就是選取某些元素前面或後面這種普通選擇器無法完成的工作。控制的內容和元素是相同的，但它本身是基於元素的抽象，並不存在於文件結構中。比如說，我們可以透過:before來在一個元素前面增加一些文本，並為這些文本添加樣式。
元素特點
1. 優點：
（1）不佔用DOM 節點，減少DOM 節點數。
（2）讓CSS 幫忙解決了一部分JavaScript 問題，簡化了開發。
（3）避免增加毫無意義的頁面元素。
2. 缺點：
（1）不利於調試。
（2）偽元素不真正在文件內容中體現，只在視覺效果上體現，所以不能為偽元素添加具有實際意義的內容，這部分內容不會搜尋引擎抓取。
CSS 中提供了一系列的偽元素，如下表所示：
1. ::after
偽元素::after 能夠在指定元素的後面插入一些內容，在::after 中需要使用content 屬性來定義要追加的內容，而且在::after 中必須定義content 屬性才會生效（沒有需要插入的內容時可以將content 屬性的值定義為空）。
2. ::before
偽元素::before 能夠在指定元素的前面插入一些內容。與::after 相似，::before 中也需要使用content 屬性來定義要追加的內容，::before 中必須定義content 屬性才會生效（沒有需要插入的內容時可以將content 屬性的值定義為空）。
3. ::first-letter
偽元素::first-letter 用來設定指定元素中內容第一個字元的樣式，通常用來配合font-size 和float 屬性製作首字下沉效果。需要注意的是，偽元素::first-letter 僅可用於區塊級元素，行內元素想要使用該偽元素，則需要先將其轉換為區塊級元素。
4. ::first-line
偽元素::first-line 用來設定指定元素中內容第一行的樣式，與::first-letter 類似，偽元素::first-line 也僅可以用於區塊級元素，行內元素想要使用該偽元素，則需要先將其轉換為區塊級元素。
5. ::selection
偽元素::selection 用來設定物件被選取時的樣式，需要注意的是，偽元素::selection 中只能定義元素被選取時的color、background、cursor、outline 以及text-shadow（IE11 尚不支援定義該屬性）等屬性。
6. ::placeholder
偽元素::placeholder 用來設定表單元素（<input>、<textarea> 元素）的佔位文字（透過HTML 的placeholder 屬性設定的文字）。