css – 可以:before和:之后的伪元素从父元素继承高度?

前端之家收集整理的这篇文章主要介绍了css – 可以:before和:之后的伪元素从父元素继承高度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道:before和:之后的伪元素可以使用继承值从父代继承高度,而没有实际的元素这样做?

解决方法

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

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

例如,考虑以下HTML:

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

使用以下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;
}

猜你在找的CSS相关文章