关於伪元素 ( Pseudo-elements )

伪元素有以下：

		::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 选取器