为什么是伪内容：后不显示但是在对应的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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！