:after not working as expected - html

Question

In the code below, I want to add a line after the div. I have used :after but the line comes before the div. Please help me on this.
div {
background-color: red;
width: 300px;
height: 300px;
}
div:after {
content: "";
background-color: blue;
height: 2px;
width: 120px;
margin: 24px auto 0;
display: block;
}
<div></div>

Answer 1

You can set this using position
div {
background-color: red;
width: 300px;
height: 300px;
position: relative;
}
div:after {
content: "";
background-color: blue;
height: 2px;
width: 120px;
margin: 24px auto 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div></div>

Answer 2

The name ::after for the pseudo-element can be a little misleading. It doesn't come after the element the selector is targeting, but inside it, after all the other content.
So your code is equivalent to this:
#div1 {
background-color: red;
width: 300px;
height: 300px;
}
#div2 {
background-color: blue;
height: 2px;
width: 120px;
margin: 24px auto 0;
display: block;
}
<div id="div1">
<div id="div2"></div>
</div>
(and because your div has no content, it doesn't matter whether you use ::before or ::after).
So you either have to use positioning to move the blue line to be (visually) after the div, or you could apply your ::after to the parent element of the div, which may or may not do what you want:
#inner {
background-color: red;
width: 300px;
height: 300px;
}
#outer:after {
content: "";
background-color: blue;
height: 2px;
width: 120px;
margin: 24px auto 0;
display: block;
}
<div id="outer">
<div id="inner"></div>
</div>

Answer 3

You can set line by using below code
<style type="text/css">
div {
background-color: red;
width: 300px;
height: 300px;
position: relative;
}
div::after {
content: " ";
background-color: blue;
display: block;
position: absolute;
height: 2px;
width: 120px;
left: 100%;
}
</style>
<div></div>

Answer 4

you can make the margin-top property of the after selector equal to your required div height,and add float:left;
div {
background-color: red;
width: 300px;
height: 300px;
float:left;
}
div:after {
content: '';
background-color: blue;
height: 2px;
width: 120px;
margin: 300px auto 0;
display: block;
}
<div></div>