html - 使用css时 block 级元素的文档流:after pseudo selectors

Question

• 为什么 block 级元素框'(red)'出现在'(blue)之后' 容器内容而不是内容框本身之后？
• 如何使用 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;
}