::before 和 ::after 是 CSS 中的两个伪元素（在 CSS3 中被正式定义为伪元素，之前在一些旧文档中可能被称为伪类，但这是不准确的），它们允许你在元素的内容前后插入新的内容或样式，而不需要在 HTML 文档中实际添加额外的标记。这两个伪元素在用法上非常相似，但主要区别在于它们各自插入内容的位置：::before 在元素内容的前面插入，而 ::after 在元素内容的后面插入。

用法

1. 插入内容

你可以使用 content 属性来指定 ::before 和 ::after 伪元素要显示的内容。这个属性是必须的，因为伪元素默认不会生成任何内容。

p::before {
    
    
  content: "Before: ";
  color: blue;
}

p::after {
    
    
  content: " After.";
  color: red;
}

上面的 CSS 会在每个 <p> 元素的内容前添加蓝色的 “Before: " 文本，并在其后添加红色的 " After.” 文本。

2. 样式化

除了插入内容外，你还可以使用其他 CSS 属性来样式化这些伪元素，比如设置背景、边框、宽度、高度等。

div::before {
    
    
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: green;
  margin-right: 10px;
}

这个例子中，div 元素前会插入一个绿色的正方形块。

区别

• 位置：::before 在元素内容之前插入内容或样式，而 ::after 在元素内容之后插入。
• 用途：虽然它们都可以用来插入内容和样式，但根据你想要的效果，选择哪一个伪元素会更合适。例如，如果你想在文本前添加一个图标或装饰，可能会使用 ::before；如果你想在文本后添加注释或引用，可能会使用 ::after。

注意事项

• 伪元素 ::before 和 ::after 必须结合 content 属性一起使用，即使你不打算插入任何可见的内容（比如，只想添加一些样式或边距），也需要设置 content: ""（一个空字符串）。
• 伪元素不会出现在 DOM 树中，因此你不能通过 JavaScript 直接访问或修改它们。但是，你可以通过修改与它们关联的元素的样式来间接影响它们。
• 伪元素继承父元素的某些样式属性，但并非全部。例如，它们不会继承 display 属性，除非明确指定。