::after Appears after the text in the div and not after the div - is that how it's supposed to be?

Question

css

The solution with top:100% and relative works, but is ::after supposed to behave like this, because it is specified that it is a block element and its behavior is very strange.
Code link: jsfiddle.net/n175tvrv/2

Answer 1

The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content . They are explained in the section on generated text .

Specification
Just because it's a block element doesn't mean it has to be rendered outside of the parent for some reason. This only affects its relationship with neighboring elements.
As for your code, you have twice the width for after : 100% and 1400px . I don't know if it's on purpose or not.
PS In the future, try to describe in more detail what exactly is strange in the behavior of the element, I did not immediately understand what you are talking about.

Answer 2

The afterter is added to the end of the element before the closing tag, the before - before the tag.
If you want to add a letter, set pseudo-elements to type "inline".
If you want to add a block - put block.
If it's an element outside the block, add an absolute and move top: left:
Remember that the disadvantage of absolutes is that when you make a responsive site, they will remain absolutes, which in responsive design will often cause problems if done illiterately.