Неочевидные свойства linear-gradient?

Question

[kozomyot]

Здравствуйте, нужна помощь специалиста в разъяснении ситуации. Есть DIV залитый градиентом, по бокам размещены псевдо-элеметы before, after со своим цветом background. Сначала я выставил высоту псевдо-элементов 100%, но изменив ее на 50% увидел что градиент родительского блока берет начало в псевдо-элементе. Не могу понять как такое происходит. Буду благодарен за объяснение или за направление куда копать по данному вопросу. Вот пример - codepen.io/kozomyot/pen/kkPyYo

Answer 1

[Ankhena]

before и after не меняют размеры родительского элемента. Соответственно фон родителя начинается там где начинается сам элемент.

Comments

[Сергей delphinpro]

дополню/поясню для kozomyot : псведоэлементы - это отдельные элементы, расположенные внутри своего родителя. Это не рамка (border), и они никак не влияют на родителя.

[kozomyot]

Благодарю отозвавшихся. Я надеюсь вы посмотрели мой пример? Он наглядно дополняет суть вопроса. Почему background родительского элемента в виде градиента начинается/заканчивается в псевдо-элементах? Если родителю задать цвет в HEX-формате или RGBa, то все очевидно и не вызывает вопросов. Извините, если криво изложил, но надеюсь теперь понятнее:)

[Ankhena]

kozomyot: нет, не понятно что Вас смущает.
Что значит начинается "в псевдо-элементах"? Под ними?
И не увидела разницы в поведении родителя при полупрозрачном цвете.

Есть родитель, у него есть фон. Фон занимает всего родителя. На нем лежат 2 элементика, которые частично перекрывают этот фон. Логично: фон начинается и заканчивается ПОД псевдо-элементами.

Нарисуйте, как по-Вашему должно происходить.

[Ankhena]

ploskost:
я и говорю: нарисуйте желаемое поведение фона :)

[kozomyot]

Ankhena W: спасибо, со второго раза дошло! Вообще вся проблема в том что я не вынес псевдо-элементы за границы родительского блока - это меня сбило с толку и привело к неверным выводам и созданию этого вопроса.

Answer 2

[Дмитрий]

before и after это как ещё два div-а внутри вашего блока, просто они псевдоэлементы. Подумайте сами. Ваш блок position: relative, а before и after имеют position: absolute. Как ведут себя обычные div-ы с такими параметрами?

<div classs="one">
   <div classs="two"></div>
   <div classs="two"></div>
</div>

.one{
    position: relative;
}
.two{
    position: absolute;
}

Comments

[kozomyot]

Полностью согласен:) .two будет позиционироваться в границах родителя у которого {position: relative;}. В итоге здесь вопрос трансформировался в разъяснение свойств псевдо-элементов:)