偽元素有以下：

		::after (:after)
		::backdrop 
		::before (:before)
		::cue
		::cue-region
		::first-letter (:first-letter)
		::first-line (:first-line)
		::grammar-error 
		::marker 
		::part() 
		::placeholder 
		::selection
		::slotted()
		::spelling-error 

初認識偽元素可以參考：
小事之 CSS 偽類 與 偽元素
全都是假的，一起來認識偽元素！
CSS | 全都是假的！關於那些偽類和偽元素 - 基本用法

目前最常使用到的就是 ::before 和::after ，有使用過但較少使用的是::placeholder
偽元素顧名思義就是「假」的元素，不會像 HTML 元素一樣確切的存在網頁內容的結構中
若有使用到 ::before 或::after 偽元素可以發現在 HTML 中他們的位置會放在 HTML 元素內層

另外有一個自己比較少用的但覺得之後可以嘗試用用看的 ::selection，可以設定用滑鼠反白文字內容時的樣式，可參考 ::selection - CSS: Cascading Style Sheets | MDN

使用上需注意：

• 偽元素 ( Pseudo-elements ) 常與偽類 ( pseudo-class ) 一起介紹，因兩者在初學時常會搞混，偽元素在語法上會在元素後方接兩個冒號，例如 .item::before，為了和偽類 ( pseudo-class ) 的一個冒號 ( .item:hover ) 做區別，但是因 W3C 規範在早期沒有這樣的區別，因此偽元素寫成一個冒號 .item:before 也會被瀏覽器接受

• 因偽元素是透過瀏覽器運算和渲染後才會出現，因此點擊「檢查」開啟 devtool 才會看到，若是「檢查網頁原始碼」就只會出現未經過運算的原始碼，也就是原本撰寫的 HTML

• ::before 和::after 都需要搭配 content 屬性來產生內容，偽元素才會出現，content 的值可以是空字串 ' ' ，例如 範例

<div class="box">
</div>


.box {
  width: 300px;
  height: 300px;
  border-radius: 10px;
  background-color: #22333b;
  position: relative;
}
.box::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #c6ac8f;
  position: absolute;
  top: 20px;
  left: 20px;
}

• 由於偽元素 ( Pseudo-elements ) 除了 ::before 和::after 大多不會存在 HTML 結構中，因此較適合使用在視覺上的裝飾，若是有意義的網頁內容，為了要讓瀏覽器能順利辨識網頁結構，不建議使用偽元素來做

• 如上述，裝飾性的內容適合使用偽元素來製作，相較於把裝飾性的內容用 div 或是 span 等放在 HTML ，形成一個無語意的內容，是較好的做法

參考資料：
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
書籍：金魚都能懂的 CSS 選取器