CSS中::after伪元素为何处于原div内部？如何调整为并排显示？

问题核心是::after伪元素默认是宿主元素的子元素，会被包含在.box这个flex容器内部。要让红色原div与绿色伪元素并排，最实用的方法是利用绝对定位让伪元素脱离内部文档流：

.box {
  display: flex;
  width: 200px;
  height: 250px;
  background: red;
  position: relative; /* 设置为伪元素的定位基准 */
}

.box::after {
  content: "";
  background: green;
  width: 200px;
  height: 250px;
  position: absolute;
  left: 100%; /* 将伪元素定位到.box的右侧边缘 */
  top: 0;
}

原理：通过position: relative让.box成为伪元素的定位参考，再用position: absolute将伪元素从.box的内部文档流中脱离，最后通过left: 100%把伪元素精准定位到.box的右侧，实现并排效果。

内容的提问来源于stack exchange，提问作者arrmani88