html伪元素before占用高度,css – 可以：before和：之后的伪元素从父元素继承高度？...

否.伪元素可以从其生成元素的父代继承值的唯一方法是当生成元素本身也从其父代继承时.

这是因为继承从父母到孩子,一次一个级别.为了继承在多个级别的后代工作,每一个后裔必须继承.

例如,考虑以下HTML：

使用以下CSS：

.parent {

width: 100px;

height: 100px;

}

.parent > .child:before,.parent > .child:after {

content: '';

position: absolute;

width: inherit;

height: inherit;

}

这将不起作用,因为即使伪元素具有继承的值,生成它们的元素也就是.parent> .child,不从.parent继承.相反,它们继承两个属性的默认值auto.

为了使其工作,您将需要具有.parent> .child继承：

.parent {

width: 100px;

height: 100px;

}

.parent > .child {

width: inherit;

height: inherit;

}

.parent > .child:before,.parent > .child:after {

content: '';

position: absolute;

width: inherit;

height: inherit;

}