css :before, 为什么我的形状不是彼此重叠

Question

我想使用 CSS :before 选择器创建当前 div 样式的副本，并将其覆盖在初始 div 之上。但如果不更改 :before 位置，我无法做到这一点。

为什么会出现这种情况，如何保证这两者的位置始终相同？

.example {
  margin: 100px;
  height: 100px;
  width: 100px;
  background-color: transparent;
  border: 5px solid red;
  border-radius: 50%;
  border-right-color: transparent;
  display: block;
}

.example:before {
  content: "";
  display: block;
  border: 5px solid yellow;
  width: 100px;
  height: 100px;
  background-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;

}

<div class='example'/>

Answer 1

Why does this happen

因为::before 伪元素被呈现为好像它是 div 的第一个 child 元素，所以它必须在父元素的边框内。它的左上角静态位置与您认为的父级尺寸偏移了 5 像素，但实际上是那些尺寸的边界外部。边界是圆形的，乍一看可能会混淆人们对这里事物的看法。 (感谢 DaniP 的澄清。)

因此，您将一个 110 像素宽和高(每边 5 像素边框加上 100 像素宽度/高度)的子元素插入到一个本身仅为 100 像素乘 100 像素的元素中，因此它必须溢出父元素。将 overflow: hidden 添加到 div 或 outline，您会看到伪子项被截断的位置。

overlay it on top of my initial div

例如 margin:-5px 在伪子节点上就可以了。

根据您最终想要实现的目标，这可能不是最佳方法。例如，如果 div 最终将包含实际(文本)内容，那么伪子会将其推开。作为替代方案，您可以定位相对的 div 和绝对的伪子级，每个顶部/左侧 -5px，这将实现相同的子级定位。如果需要在内容后面，添加z-index。