::after Появляется после текста в div а не после div — так и должно быть?

Question

[Alex Kav]

Решение с top:100% и relative работает, но разве ::after должен себя так вести, ведь указано что он блочный элемент и его поведение очень странно.
Ссылка на код: 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.

Спецификация

ведь указано что он блочный элемент

То, что это блочный элемент, вовсе не значит, что он по каким-то причинам должен рендериться вне родителя. Это влияет только на его взаимотношение с соседними элементами.

А что касается вашего кода, у вас для after ширина дважды указана: 100% и 1400px. Не знаю, специально это или нет.

P.S. В будущем постарайтесь более подробно описывать, что именно странного вы видите в поведении элемента, я не сразу сообразил о чем вы говорите.