CSS 伪元素

伪元素用来选择元素的某一部分或在内容前后插入虚拟节点，而不必在 HTML 里多写标签。写法是双冒号（推荐）加伪元素名，如 ::before、::after。旧版也支持单冒号，但规范推荐用双冒号以与伪类区分。

常用伪元素

伪元素	说明
::before	在元素内容前插入一个虚拟子元素
::after	在元素内容后插入一个虚拟子元素
::first-line	选中块级元素的第一行文字
::first-letter	选中块级元素的第一个字符
::selection	用户选中的文字部分（高亮样式）
::placeholder	输入框的占位符文字样式

---

::before 与 ::after

• 必须配合 content 使用（可设为 content: "" 做纯装饰）。
• 默认是内联，可设 display、宽高、背景等，常用于图标、装饰线、清除浮动等。

.quote::before {
  content: """;
  font-size: 2em;
  color: #999;
}

.btn::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

---

::first-line 与 ::first-letter

只对块级元素有效，用于首行或首字样式（如杂志首字下沉）：

p::first-line {
  font-weight: bold;
  color: #333;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 4px;
}

---

::selection

设置用户选中文字时的背景和文字颜色：

::selection {
  background: #b3d4fc;
  color: #000;
}

---

小结

• 伪元素用双冒号（::），选择「元素的一部分」或「内容前后虚拟节点」。
• ::before / ::after 必须写 content，常用于装饰、图标、清除浮动。
• ::first-line / ::first-letter 用于首行、首字样式；::selection 用于选中高亮。

下一节学习 CSS 导航栏。