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?

Solution 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;
}

Solution 2

I know this question is fairly old, but I stumbled on it today. According to http://www.w3.org/TR/CSS21/generate.html, the accepted answer isn't accurate:

The :before and :after pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached.

I just tried inheriting width and it worked.

Solution 3

Concerning these answers, I was just bumping into the aspect of transformation. It may resemble on inheritance; I hope it helps somebody.

Having this:

<div class="box">    
  <div class="frame"></div>
</div>

and this transformation for frame:

transform: rotate(10deg);

Then the frame:before and frame:after are also transformed. Yet they do not have the properties of frame, such as width and height, which is like explained above. Full example see here:

http://jsfiddle.net/chafpgwt/1/

On this fiddle, there are three nested squares, each rotated by 10 deg, but the transform definition is only set for the frame, not for frame:after neither frame:before.

It is a pitfall to think transformations also are not "inherited", as everything else is neither. The transformation has influence in another context.

Solution 4

If you want to use your ::before pseudo-element to implement a background the trick is to make sure that you positioned your element absolute and his parent relative. Make also sure you set the width of the parent.

Example

&__item {

    position: relative;
    width: 100%;
    height: 100%;
      
        &::before {
            content: "";
            background-color: red;
            background-size: 100%;
            
            position: absolute;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;
            
        }
}

View more solutions

Comments

[Adam Libuša]

Not sure about your use case, but if you just need :before/:after to have the same height as the parent element, then height: 100% in the pseudoelement works quite well.

[BoltClock]

I'll edit my answer to clarify. I think it was too short and therefore it might have been confusing.

[AKG]

When I posed the question, I didn't understand how the ::before and ::after pseudo elements worked. Take this situation: divA > divB::after - the intent of my question was to know whether divB:after could inherit divA's properties. In my phrasing of the question: _parent element_ referred to divA` and actual element referred to divB. I hope my question was interpreted in this manner.

[joe]

thanks @BoltClock, it's much more clear now. AKG, i think your question was originally understood correctly, but all is more clearer now anyway :)