Почему блок ::after прилегает не к родительскому блоку, а к его дочерним элементам?

Question

[Талян]

Не понимаю что происходит: делаю для блока .logo псевдокласс ::after, который в качестве косой линии должен продлевать блок.

При сужении экрана и соблюдении min-width: 260px всё работает как надо, но при расширении экрана до около 800-900 пикселей этот треугольник прилипает уже не к предыдущему блоку, а к его дочерним элементам, а точней к тексту внутри блока.

Я первый раз делаю эту косую черту, но не совсем понимаю в чем заключается проблема.

Для удобства выкладываю рабочий пример кода без лишнего оформления. Нужный треугольник закрасил в красный цвет.

Заранее благодарю за подсказку.

Comments

[Сергей delphinpro]

Псевдо-элементы — это внутренние элементы блока, к которому они добавлены.
Перед его содержимым (before) или после (after).
А не перед самим блоком или после него.

Исходя из этого и исправляйте свою верстку.

[Талян]

Сергей delphinpro, ааа от оно че михалыч. Перенесли бы в секцию ответов, так как ваш ответ вполне решает мою проблему

Answer 1

[Сергей delphinpro]

https://developer.mozilla.org/ru/docs/Web/CSS/::before

В CSS, ::before создаёт псевдоэлемент,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства content. По умолчания является инлайновым.