为什么是伪内容:后不显示但是在对应的div? [英] Why is the pseudo content :after not shown after but in the corresponding div?
问题描述
以下示例显示了一个框:
div
$ c> content,应该是一个单独的块。
div.box {background-color:#FAA; width:10em; overflow:scroll;} div.box:after {content:☑;显示:block; background-color:#AFA; width:5em; overflow:auto;}
< div class = > x< / div>
放置在滚动条内。
:之后
内容来自可滚动区域,因为即使元素被命名为:
之后,它实际上是 div.box
,因此将位于 .box
元素内(即在可滚动区域内)。
从MDN :CSS :: after伪元素匹配所选元素的 虚拟最后一个子元素 strong>。
(强调我)
div.box {background-color:#FAA; width:10em; overflow:scroll;} div.box .after {display:block; background-color:#AFA; width:5em; overflow:auto;}
< div class = > x< div class =after>☑< / div>< / div>
>
如果你希望它位于 div.box
之外,使用容器(或)上的:after
后使用绝对定位。
div .box {background-color:#FAA; width:10em; overflow:scroll;} div.container:after {content:☑;显示:block; background-color:#AFA; width:5em; overflow:auto;} < div class = > < div class =box> x< / div>< / div>
The following example shows a box
div
with an :after
content, which should be a separate 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>
But the after content is placed inside the scroll bars. My expectation was that it comes actually after the scrollable area.
The :after
content comes within the scrollable area because even though the element is named :after
, it is in actual terms a child of the div.box
and hence will be positioned within the .box
element (that is within the scrollable area).
From MDN: The CSS ::after pseudo-element matches a virtual last child of the selected element.
(emphasis mine)
So the code in question in essence becomes the same as the following snippet.
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>
If you want it positioned outside the div.box
then you would have to use the :after
on a container (or) use absolute positioning.
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>
这篇关于为什么是伪内容:后不显示但是在对应的div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!