偽元素（Pseudo‐element） - daniel-qa/Vue GitHub Wiki

  • Render Tree

Render Tree 就像是最後列印前的畫面預覽，是「即將被畫出來的畫面藍圖」。

  • 偽元素（Pseudo‐element）

偽元素就是長在 Render Tree 上。

  • 逗號分隔（,）代表「多個選擇器同時套用」
A, B, C { ... }

意思是：

對 A、B、C 都套用相同的樣式規則。

所以這裡的：

*, *::before, *::after { box-sizing: border-box; }

等同於寫三次：

* { box-sizing: border-box; }
*::before { box-sizing: border-box; }
*::after { box-sizing: border-box; }
  • 「前 / 後」就是 CSS 裡的 文件流（document flow）概念

block 元素 → 一個接一個垂直堆疊（top → bottom）

inline 元素 → 水平排列（左 → 右，LTR 預設）

inline-block / flex / grid → 可以改變排列方式，但基本概念還是「原本在 DOM 裡的順序」

你可以把它想成「瀏覽器內建幫你寫的虛擬節點」

如果用 Vue 心智模型類比，大概像：

瀏覽器在畫面裡偷偷變成：

<div class="card">
  [virtual ::before]
</div>

但這個 [virtual ::before]：

JS 無法 querySelector

不在 DOM tree

只存在 Render tree

每次重排都可能重建

這就是為什麼我們要全域設：

*, *::before, *::after {
  box-sizing: border-box;
}

因為：

這些「動態長出來的盒子」如果沒一起設定 box model， 版面計算就會混用兩種規則，然後出現難解的 1~2px 偏移 bug。

偽元素其實存在於：

Render Tree（渲染樹） 不是 DOM，也不是檔案，而是「畫面計算用的結構」。

偽元素就是動態產生的，而且是由瀏覽器在「渲染當下」即時建立、即時銷毀的。

偽元素 = 用 CSS「生成出來的虛擬元素」

它不是 HTML 裡真的存在的節點，而是瀏覽器在渲染時幫你畫出來的一個額外盒子，讓你可以多控制一層樣式。

你可以把它想成：

沒改 HTML，卻偷偷多長出一個可以 styling 的元素。

最常見的兩個：::before、::after

它們會在元素內容的 前面 / 後面 生成一個虛擬節點。

HTML

<button class="btn">送出</button>

CSS

.btn::before {
  content: "★";
  margin-right: 4px;
}

畫面看起來會像：

★ 送出

但實際 DOM 根本沒有那顆星星。

⚠️ **GitHub.com Fallback** ⚠️