以下示例显示了box div，其内容为:after，应该是一个单独的块。
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>
但是后面的内容放在滚动条内。我的期望是它实际上是在可滚动区域之后。
答案 0 :(得分：5)
:after内容位于可滚动区域内，因为即使该元素名为:after，它实际上也是div.box的子元素，因此将位于.box内{1}}元素（位于可滚动区域内）。
来自MDN： CSS :: after伪元素匹配所选元素的 虚拟最后一个孩子 。
（强调我的）
因此，有问题的代码本质上与以下代码段相同。
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>
答案 1 :(得分：5)
我认为你与伪元素有点混淆，所以我希望能为你清楚一些事情：
:: after伪元素可用于描述元素内容之后生成的内容。
快速演示如下：
p::after {
content: " :Note";
}<p>In CSS 2.1, it is not possible to refer to attribute values for other elements than the subject of the selector.</p>
看看无论div在哪里，伪元素都会在之后显示它附加的元素。这是伪元素的设计方式 - 用于添加内容before或添加内容after。
这意味着：after相对于＆＃39; real＆＃39;元素，不出现在＆＃39;滚动条之后。
相反，如果您将伪元素 绝对 放置，那么就像定位子元素一样，您可以移动＆＃39;它使用left，right，top和bottom属性：
div.box {
background-color: #FAA;
width: 10em;
overflow: scroll;
}
div.box:after {
content: "☑";
position:absolute;
display: block;
background-color: #AFA;
width: 5em;
overflow: auto;
}<div class="box">x</div>
注意
但是，我会将可滚动内容包装在div中，这样您就可以更好地控制元素的位置。
::after和:after
这个[双冒号]符号被引入...以便建立一个 伪类和伪元素之间的区别。对于 与现有样式表的兼容性，用户代理也必须接受 CSS中引入的伪元素的前一个冒号表示法 级别1和2（即：第一行，：第一个字母，：之前和 ：后）。新伪元素不允许这种兼容性 在CSS 3级中引入.~ Spec
所以，简短的回答是......
两种符号之间没有区别
稍长的回答是......
随着CSS3的引入，为了区分伪类和伪元素，在CSS3中，所有伪元素必须使用双冒号语法（::after）和所有伪类必须使用单冒号语法（:first-child）。
然而，由于IE8及以下版本并不了解这个＆＃39;双冒号＆＃39;语法（在众多其他语言中），浏览器无论如何都会接受单冒号语法（允许IE 8及以下版本也理解它）。这就是为什么开发人员在广泛的一面选择继续使用单冒号语法以便IE8（及以下）理解，为您的网站提供更好的浏览器兼容性。
进一步阅读
答案 2 :(得分：3)
我的期望是它实际上是在可滚动区域之后。
这种期望是错误的。查看CSS2.1规范，我们发现：
作者用。指定生成内容的样式和位置 ：before和：after伪元素。正如他们的名字所示， ：before和：after伪元素指定内容的位置 在元素的文档树内容之前和之后。
然后：
元素生成的格式化对象（例如，框）包括生成的内容。
这意味着您在div.box:after规则中添加的内容包含在里面 div中。 ＆＃34;＆＃34;之后＆＃34;指的是它被放置在div的正常内容之后，而不是在整个div之后。