偽類與偽元素差別

1. 如果你只在偽元素前加一個冒號，你有時會發現也可以正常運行，但在CSS3之後偽元素改為2個冒號以便和偽類分開，因此請盡量使用2個冒號的寫法才是最新且正確的寫法

2. 偽類屬於選擇器，並不會出現於DOM tree，而偽元素確實會出現於DOM tree中

偽元素基本語法

常用偽元素有::before及::after，偽元素可以創建一個原本不在DOM tree中的元素。經常用於網頁中的微互動元素，如hover文字後出現底線、radio、checkbox樣式改寫、tooltips等。

** example **
添加偽元素之前
HTML:

CSS:

RESULT:

添加偽元素之後

• content為偽元素最重要的部分，填上偽元素內容，亦可留白在之後用寬高定義，少了它偽元素無法正常顯示。
• before的位置在該元素之前
• after的位置在該元素之後

用法範例

** 微互動元素 **
Demo

HTML:

CSS:

• 使用absolute定位將偽元素定在文字下方
• 內容以寬高定義，預設的寬度為0，hover之後寬度為100%
• transition使動畫在視覺上看起來較順暢