CSS 虛擬元素
學習CSS虛擬元素的基礎知識 虛擬元素用於樣式化元素的特定部分。 它們以兩個冒號::開頭。 有時你會在代碼中看到它們用單個冒號表示，但這只是一種為了向後兼容而支持的語法。應該使用兩個冒號來區分它們和虛擬類別。 ::before和::after可能是最常用的虛擬元素。它們用於在元素之前或之後添加內容，例如圖標。 以下是虛擬元素的列表： 虛擬元素 目標 ::after 在元素之後創建一個虛擬元素 ::before 在元素之前創建一個虛擬元素 ::first-letter 可用於樣式化一塊文本的首個字母 ::first-line 可用於樣式化一塊文本的首行 ::selection 標記用戶選中的文本 讓我們來做個例子。假設您想要設置段落的第一行字體大小稍大，這在印刷排版中很常見： 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: "嘿嘿！"; }