# 伪元素选择器

URL: https://caijiao.org/css/02-selectors/05-pseudo-element
Source: docs/css/02-selectors/05-pseudo-element.md
Description: 伪元素选择器用于选中元素的特定部分，如首行、首字母或创建虚拟元素，常用于文本样式和装饰性内容。

伪元素选择器允许你选中元素的某一部分或在元素前后插入虚拟内容，通常以双冒号 `::` 表示，用于增强样式控制。

常用伪元素包括：

1. **::first-line**  
   选中元素第一行文本，可设置字体、颜色等样式。  

   ```css
   p::first-line { font-weight: bold; }
   ````

2. **::first-letter**
   选中元素首字母，常用于美化段落开头。

   ```css
   p::first-letter { font-size: 2em; color: red; }
   ```

3. **::before**
   在元素内容前插入虚拟内容，需搭配 `content` 属性使用。

   ```css
   h1::before { content: "🔥 "; }
   ```

4. **::after**
   在元素内容后插入虚拟内容，也需使用 `content`。

   ```css
   h1::after { content: " ✨"; }
   ```

5. **语法注意事项**

   * 推荐使用双冒号（`::`）表示伪元素，兼容旧浏览器时也可使用单冒号（如 `:before`）。
   * 伪元素不能作用于某些不可嵌套的元素（如 `input`）。

伪元素广泛用于界面装饰、标记内容和排版美化，是CSS视觉表现的重要补充手段。