Могут ли: before и: after псевдоэлементы наследовать высоту от родительского элемента?

Ответ 1

Нет. Единственный способ, которым псевдоэлементы могут наследовать значения от родителя своего генерирующего элемента, - это когда сам генерирующий элемент также наследуется от его родителя.

Это происходит потому, что наследование происходит от родителя к ребенку, по одному уровню за раз. Чтобы наследование работало на нескольких уровнях потомков, каждый наследник должен наследовать.

В качестве примера рассмотрим следующий 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;
}

Это не сработает, потому что хотя псевдоэлементы имеют значения 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;
}

Ответ 2

Я знаю, что этот вопрос довольно старый, но я наткнулся на него сегодня. Согласно http://www.w3.org/TR/CSS21/generate.html, принятый ответ неверен:

:before и: после псевдоэлементов наследуют любые наследуемые свойства от элемента в дереве документов, к которому они прикреплены.

Я просто попробовал наследовать ширину и работал.

Ответ 3

Относительно этих ответов я просто натыкался на аспект трансформации. Он может походить на наследование; Надеюсь, это поможет кому-то.

Имея это:

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

и это преобразование для frame:

transform: rotate(10deg);

Затем преобразуются frame:before и frame:after. Однако они не обладают свойствами frame, такими как width и height, что, как объяснено выше. Полный пример см. Здесь:

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

На этой скрипте есть три вложенных квадрата, каждый из которых повернут на 10 град, но определение преобразования установлено только для frame, а не для frame:after ни frame:before.

Это ловушка, чтобы думать, что преобразования также не "унаследованы", поскольку все остальное не является ни тем, ни другим. Трансформация имеет влияние в другом контексте.