CSS 虛擬元素

學習CSS虛擬元素的基礎知識

虛擬元素用於樣式化元素的特定部分。

它們以兩個冒號::開頭。

有時你會在代碼中看到它們用單個冒號表示，但這只是一種為了向後兼容而支持的語法。應該使用兩個冒號來區分它們和虛擬類別。

::before和::after可能是最常用的虛擬元素。它們用於在元素之前或之後添加內容，例如圖標。

以下是虛擬元素的列表：

讓我們來做個例子。假設您想要設置段落的第一行字體大小稍大，這在印刷排版中很常見：

p::first-line {
  font-size: 2rem;
}

或者您想讓首個字母加粗：

p::first-letter {
  font-weight: bolder;
}

::after 和 ::before 則稍微有點不直觀。我記得在使用 CSS 添加圖標時使用過它們。

使用 content 屬性來在元素之後或之前插入任何形式的內容：

p::before {
  content: url(/myimage.png);
}

.myElement::before {
  content: "嘿嘿！";
}