CSS:伪元素:从原始元素继承宽度/高度之前和之后

以下是关于CSS伪元素的完善且全面的答案：

伪元素是CSS中的一种选择器，它允许你在页面上创建一些不存在于HTML文档中的元素，并对它们进行样式化。伪元素通常用于在原始元素的某个位置添加一些装饰性的内容，例如在文本的开头或结尾添加引号、在链接的前后添加箭头等。

伪元素的语法是通过在选择器中添加双冒号（::）和伪元素名称来实现的，例如：

p::before {
  content: "Hello, ";
}

这段代码会在每个段落的开头添加一个文本内容为“Hello, ”的伪元素。

在伪元素中，可以使用content属性来指定要插入的内容，例如：

p::before {
  content: "Hello, ";
}

此外，还可以使用position、top、bottom、left、right等属性来控制伪元素的位置。例如，可以将伪元素定位在原始元素的左上角：

p::before {
  content: "Hello, ";
  position: absolute;
  top: 0;
  left: 0;
}

在原始元素继承宽度/高度之前和之后，可以使用伪元素来实现一些特殊的效果。例如，可以使用伪元素来创建一个圆形的背景，并将其固定在原始元素的左上角：

div {
  position: relative;
}

div::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: red;
  z-index: -1;
}

这段代码会在每个<div>元素的左上角创建一个圆形的背景，并将其固定在原始元素的左上角。

总之，伪元素是一种非常有用的CSS技术，可以帮助你在页面上创建一些不存在于HTML文档中的元素，并对它们进行样式化。