Can the :Before and :After Pseudo-Elements Inherit Height from the Parent Element

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

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

CSS: Pseudo-elements :before and :after inheriting width/height from original element

:before and :after pseudo-elements are inline boxes as much as I know. Therefore, using display: block; might help you.

How is :after element's height and width determined?

.img-span:after creates a pseudo-element within the .img-span element.

The following CSS rules

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

are stretching the :after pseudo-element to the width / height of its parent element.

.img-span may not be the parent element, as position: absolute is relative to the first parent element it encounters with either position: relative, position: absolute, or position: fixed.

Pseudo element using ::before overflow's parent element height

Let us assume the parent element has height x. Since, you are using ::before element to show the arrow by rotating it to 45deg, the diagonal of the arrow should be equal to the height of the parent element. The formula of Diagonal is side * sqrt(2). So,

    x = side * sqrt(2)

=>  side = x / sqrt(2)

Assuming, x = 50, then side will be 35.35534. So, apply the same in your fiddle:

div {
    width: 100px;
    height: 50px;
    background: tomato;
    position: relative;
}

div::before {
    content: "";
    display: block;
    width: 35.35534px;
    height: 35.35534px;
    background: blue;
    position: absolute;
    transform: rotate(45deg);
    transform-origin: 0 0;
    left: 100%;
}

Better would be to go with a css preprocessor like SASS. Here is the code where I used sass to get the result.

Working Fiddle

Children :before content inheritance

A ::before/::after pseudo-element cannot inherit from another ::before/::after pseudo-element. A pseudo-element can only inherit from its originating element — this is the element that the pseudo-element is attached to. A pseudo-element cannot even inherit from the parent of its originating element, unless the originating element itself is also inheriting from its parent and the property involved is not content.

In your example, .foo::before can only inherit from the .foo it's attached to, and likewise for .baz::before and .baz. .baz::before cannot inherit from .foo::before, so what you're trying to do is not possible. There does not appear to be a reliable way to ensure that one pseudo-element always inherits from another pseudo-element through CSS alone without enforcing this within the markup itself.

Can pseudo elements inherit color from parent element?

Actually color: inherit works just fine.

setTimeout(function(){         document.getElementById('d').style.color = 'green';}, 1000);

#d {    color: red;}#d::before {    color: inherit;    content: "before";}

<div id="d">text</div>

Have Pseudo Element Inherit Parents Background Color

You can use background: inherit on the pseudo-elements:

#mydiv:after {
  background: inherit;
}

jsFiddle Demo

---

Related Topics