详细解释伪元素::before和::after的content属性。

伪元素 ::before 和 ::after 的 content 属性详解

1. 引言

在 CSS 中，伪元素 ::before 和 ::after 允许开发者在元素的内容前后插入额外的内容。content 属性是这两个伪元素的核心，决定了插入内容的类型和显示方式。理解 content 属性的使用，可以帮助提升样式的灵活性和表现力。

2. 伪元素 ::before 和 ::after

2.1 伪元素概述

• ::before：在元素的内容之前插入内容。
• ::after：在元素的内容之后插入内容。

这两个伪元素通常用于添加装饰性内容、图标、引导符号等，而不需要修改 HTML 结构。

2.2 语法示例

h1::before {
   
  content: "★ ";
  color: gold;
}

h1::after {
   
  content: " ★";
  color: gold;
}