什麼是偽元素(Pseudo Element)?

偽元素就如同它的名字一樣，不是一個實際存在於網頁裡的元素，行為與表現卻又和真正網頁元素一樣，使用時必須搭配一個CSS選擇器來產生樣式與效果(例如:改變第一個字的樣式、新增內容...)。

偽元素(Pseudo Element)有哪些?

常見的有

• ::after
• ::before
• ::first-letter
• ::first-line
• ::marker
• ::selection

參考資料:CSS - The ::selection Pseudo-element

偽元素的語法

最前面放選擇器 後面加上偽元素

selector::pseudo-element {
  property: value;
}

例如:

p::first-letter {
  color: #ff0000;
  font-size: 50px;
}

參考資料:CSS Pseudo-elements

最常用到的兩個偽元素: ::before 和 ::after

::before 是在原本的元素「之前」建立一個新的元素
::after 則是在原本的元素「之後」建立一個新的元素。

使用::before和::after時，要搭配 content這個屬性來插入要新增的內容

例如:

<p>You’re not early.</p>

p::before {
	content: "Youre not late.";
    color: palevioletred;
	background-color:burlywood;
    font-weight: bold;
}

p::after{
	content: "You are very much ON TIME, and in your TIME ZONE destiny set up for you.";
    color: lightseagreen;
	background-color:lightgrey;
    font-weight: bold;
}

偽元素(Pseudo Element)和偽類(Pseudo Class)的差異?

• 偽元素使用兩個冒號「::」開頭，而偽類使用一個冒號「:」開頭。
• 偽元素和偽類的使用方式是一樣的，都是搭配一個CSS選擇器來產生樣式上的變化，唯一的差異是偽元素的效果是像新增了一個新的HTML元素(其實並不存在於DOM上)到網頁上，而偽類則是在原有的HTML元素新增在特定狀態時才會出現的樣式效果。

參考資料:Pseudo-classes and pseudo-elements
::before & ::after 無中生有的僞元素選取器 - 傑克這真是太神奇啦
圖片來源:unsplash

以上為個人學習筆記整理
若有錯誤，歡迎指正