使用css时的块级元素的文档流：在伪选择器之后

Question

• 为什么块级元素框＆＃39; （红色） ＆＃39;出现在＆＃39; （蓝色） ＆＃39;之后容器内容而不是内容框本身？
• 如何使用css :after选择器实现这一目标？

---

TEST AREA

CSS

div{
    background:#59c;
    box-sizing: border-box;
    height: 100px;
    width: 100%;
    position: relative;
}
div:after{
    background:#b55;
    content: "I SHOULD BE AFTER CONTENT BOX";
    width: 100%;
    display:block;
}

Answer 1

您可以对伪元素使用绝对定位：

<强> DEMO

div:after{
    position:absolute; /* <-- add this */
    top:100%; /* <-- and this */
    background:#b55;
    content: "I SHOULD BE AFTER CONTENT BOX";
    width: 100%;
    display:block;
}

Answer 2

这将按预期工作：

div {
    background:#59c;
    box-sizing: border-box;
    height: 100px;
    width: 100%;
    position: relative;
}
div:after {
    position: absolute;
    top: 100%;
    left: 0;
    background: #b55;
    content: "I SHOULD BE AFTER CONTENT BOX";
    width: 100%;
    display: block;
}