[Back To Basic] CSS Pseudo-elements

pseudo-elements 可針對元素的特定部分，添加樣式

• e.g. 針對元素的第一個字或第一行，添加樣式
• e.g. 新增內容在元素的前後

語法

• W3C 在 CSS 三為了區別 pseudo-elements 和 pseudo-class，用冒號數量分辨
• 在 CSS2 、CSS1並無此區別
• 因向下相容，一個冒號的語法仍可接受在CSS1、CSS2 的 pseudo-elements

• ::pseudo-element
• 2個冒號

• :pseudo-class
• 1個冒號

pseudo-elements 舉例

• ::first-line
• 在第一行加入樣式
• 只能用在"block"層級的元素

• ::first-line
• 在第一個字母加入樣式
• 只能用在"block"層級的元素

• ::before
• 插入特定內容在元素之前

• ::after
• 插入特定內容在元素之後

• ::selection
• 被選擇的部分元素

source code