html - 为什么伪内容是:after not shown after but in the corresponding div?

Question

下面的示例显示了一个 box div 和一个 :after 内容，它应该是一个单独的 block 。

div.box {
    background-color: #FAA;
    width: 10em;
    overflow: scroll;
}
div.box:after {
    content: "☑";
    display: block;
    background-color: #AFA;
    width: 5em;
    overflow: auto;
}

<div class="box">x</div>

但是后面的内容是放在滚动条里面的。我的预期是它实际上出现在可滚动区域之后。

Answer 1

:after 内容位于可滚动区域内，因为即使该元素名为 :after，但实际上它是 div 的子元素。 box，因此将定位在 .box 元素内(即在可滚动区域内)。

From MDN: The CSS ::after pseudo-element matches a virtual last child of the selected element.

(强调我的)

因此，有问题的代码本质上与以下代码段相同。

div.box {
    background-color: #FAA;
    width: 10em;
    overflow: scroll;
}
div.box .after {
    display: block;
    background-color: #AFA;
    width: 5em;
    overflow: auto;
}

<div class="box">x
  <div class="after">☑</div>
</div>

---

如果您希望它位于 div.box 之外，那么您必须在容器上使用 :after(或)使用绝对定位。

div.box {
    background-color: #FAA;
    width: 10em;
    overflow: scroll;
}
div.container:after {
    content: "☑";
    display: block;
    background-color: #AFA;
    width: 5em;
    overflow: auto;
}

<div class="container">
  <div class="box">x</div>
</div>