Document flow of block level elements when using css :after pseudo selectors

Question

• Why does the block level element box '(red)' appear after the '(blue)' containers content and not after the content box itself?
• How can this be achieved using css :after selector?

---

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

You can use absolute positioning for the pseudo element :

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

This will work as you expect :

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;
}