Can the :before and :after pseudo-elements inherit height from the parent element?

Question

I am wondering whether the :before and :after pseudo-elements can inherit the height from parent using the inherit value, without the actual element doing so?

Answer 1

No. The only way that pseudo-elements can inherit values from the parent of their generating element is when the generating element itself is also inheriting from its parent.

This is because inheritance occurs from a parent to a child, one level at a time. For inheritance to work across several levels of descendants, every descendant must inherit.

As an example, consider the following HTML:

<div class="parent">     <div class="child">     </div> </div> 

With the following CSS:

.parent {     width: 100px;     height: 100px; }  .parent > .child:before, .parent > .child:after {     content: '';     position: absolute;     width: inherit;     height: inherit; } 

This will not work because even though the pseudo-elements have values of inherit, the element generating them, that is, .parent > .child, does not inherit from .parent. Instead, they inherit the default value of auto for both properties.

In order for this to work you will need to have .parent > .child inherit as well:

.parent {     width: 100px;     height: 100px; }  .parent > .child {     width: inherit;     height: inherit; }  .parent > .child:before, .parent > .child:after {     content: '';     position: absolute;     width: inherit;     height: inherit; }