/

CSS 虛擬元素

CSS 虛擬元素

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

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

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

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

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

以下是虛擬元素的列表：

虛擬元素 目標
::after 在元素之後創建一個虛擬元素
::before 在元素之前創建一個虛擬元素
::first-letter 可用於樣式化一塊文本的首個字母
::first-line 可用於樣式化一塊文本的首行
::selection 標記用戶選中的文本

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

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

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

1
2
3
p::first-letter {
  font-weight: bolder;
}

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

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

1
2
3
4
5
6
7
p::before {
  content: url(/myimage.png);
}

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

tags: [“CSS”, “pseudo-elements”, “styling”, “web development”]