CSS 中的 ::before 和 ::after 伪元素

CSS 中的 ::before 和 ::after 伪元素用于向元素的内容前后添加内容。这些添加的内容被称为伪元素。

::before 伪元素是一个好方法，可以用来在内容之前插入生成的内容，而 ::after 伪元素则可以用来在内容之后插入生成的内容。

解法1：使用 ::before 和 ::after 插入简单文本内容。

div::before {
  content: "前缀";
}
 
div::after {
  content: "后缀";
}

解法2：使用 ::before 和 ::after 插入图片。

div::before {
  content: url("图片链接");
}
 
div::after {
  content: url("图片链接");
}

解法3：使用 ::before 和 ::after 插入复杂的内容。

div::before {
  content: "<p>这是一个段落</p>";
}
 
div::after {
  content: "<img src='图片链接' />";
}

解法4：使用 ::before 和 ::after 插入用户自定义属性。

div::before {
  content: attr(data-before);
}
 
div::after {
  content: attr(data-after);
}

HTML部分：

<div data-before="前缀" data-after="后缀">我是内容</div>

解法5：使用 ::before 和 ::after 插入计数器内容。

div::before {
  content: counter(section);
}
 
div::after {
  content: counter(section);
}

HTML部分：

<div>我是内容</div>
<div>我是内容</div>

需要注意的是，::before 和 ::after 伪元素必须配合 content 属性使用。如果没有 content 属性，伪元素将不会生效。此外，::before 和 ::after 生成的内容默认是内联元素，所以通常需要设置 display 属性为 block 或 inline-block 等，以便可以设置宽高。

div::before {
  content: "前缀";
  display: block;
}
 
div::after {
  content: "后缀";
  display: block;
}