Почему псевдоэлемент вылезает за пределы родителя?

Question

[Qurel]

При уменьшении экрана псевдоэлемент становится не 65% от родителя, как ему задано, а больше него.

spoiler

Git Hub Pages

Answer 1

[Ankhena]

Потому что 210px + 65% при разной ширине окна дадут разный результат. Где-то псевдо не дотянет до конца родителя, а где-то вылезет.

Просто используйте флексы для h2 вместо абсолюта для псевдо.
https://jsfiddle.net/5c1punm4/

Answer 2

[Danny Arty]

Также 65% и остается у него, все верно высчитывается. Родительский элемент у него h2 же, можете при любом разрешении посмотреть длину before - она будет составлять 65% от длины h2. Тем более у псевдоэлемента position: absolute; стоит, так что он может легко выходить за границы

Comments

[Qurel]

Как сделать чтобы псевдоэлемент был 65% от родителя и не вылезал за его границы?