Почему появляется скроллинг только для правого элемента c position:absolute?

Question

[Claus]

Есть блок, у которого имеются два псевдоэлемента (before, after), имеющие абсолютную позицию относительно родителя.
Почему, если левый псевдоэлемент выходит за пределы экрана, горизонтальный скроллинг не появляется, в то время, как с правым элементом все наоборот?
Как сделать так, чтобы скроллинг не появлялся и при выходе за пределы экрана правого элемента?

Код по ссылке: jsbin.com/namugone/2/edit

Comments

[Fantom129]

Привет, а что если при использовании вашего решения - хоть и исчезает скролл, сам контент псевдо-элемента тоже исчезает? как решить такую проблему?

Answer 1

[Дамир Рысаев]

Не могу объяснить почему появляется скролл.
Но, если добавить блоку родителю overflow: hidden; + минимальную ширину контента, то можно избавится от скролла.
jsbin.com

Comments

[Claus]

Благодарю за такое простое решение. Очень интересно, почему wrapper не обрезает псевдоэлементы, свойством overflow:hidden;

Answer 2

[Юрий Лобанов]

Это нормальное поведение. Если задать элементу позицию левее body, то он просто скроется. Если правее, получим горизонтальный скролл. Задайте для body или родителя overflow-x: hidden;

upd: jsbin.com/cilafena/1/edit

Comments

[Claus]

Необходимо, чтобы скроллинг появлялся, когда за пределы страницы выходят обычные элементы и не учитывал элементы с position: absolute;

[Юрий Лобанов]

@Santa_Claus для этого я и сказал про родителя. Body будет на все элементы, если сделать обертку для этих элементов, то только для них.

[Юрий Лобанов]

@Santa_Claus посмотрите по ссылке, дополнил ответ

[Alexprog1]

Помогло. Спасибо.