为什么是伪内容:之后没有显示但是在相应的div中？

Question

以下示例显示了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>

但是后面的内容放在滚动条内.我的期望是它实际上是在可滚动区域之后.

Answer 1

本:after内容来自滚动区域内,因为即使元素被命名:after,它是在实际方面的一个孩子div.box,因此将被置于内.box元素(也就是滚动区域内).

来自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>

Answer 2

我认为你对伪元素有点困惑,所以我希望能为你清楚一些事情:

:: 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相对于'real'元素定位,而不是出现在'scrollbars'之后.

相反,如果你的位置你的伪元素绝对,那么,你会与定位的子元素期望的那样,你可以"移动"它使用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中引入的伪元素的先前单冒号表示法(即:first-line,:first-letter,:before和:after).这种兼容性是不允许在CSS级别3〜推出了新的伪元素规格

所以,简短的回答是......

两种符号之间没有区别

略长的回答是......

随着CSS3的引入,为了区分伪类和伪元素,在CSS3中,所有伪元素必须使用双冒号语法(::after),并且所有伪类必须使用单冒号语法(:first-child).

但是,由于IE8及以下版本不理解这种"双冒号"语法(在众多其他语言中),浏览器无论如何都会接受单冒号语法(允许IE 8及以下版本也理解它).这就是为什么开发人员在广泛的一面选择继续使用单冒号语法以便IE8(及以下)理解,从而为您的站点提供更好的浏览器兼容性.

进一步阅读

• http://www.w3.org/wiki/CSS/Selectors/pseudo-elements/:after