position:absoluteした要素に可変の高さを与える

Question

position:absoluteした要素に可変の高さを与える方法として以下の方法がありますが、
###HTML

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

###CSS

.box {
    position: relative;
    width: 400px;
    height: auto;
}
.box::before {
    content: "";
    display: block;
    padding-top: 100%;
}
.inner {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

CSSでのbox::beforeでpadding-topに.box要素の幅の100%の値を指定することで1:1の範囲を生成していますが、この範囲は.box要素の範囲なのでしょうか。それとも.box::before要素の範囲なのでしょうか。

Answer 1

正確にはおそらくどちらもの範囲になるのではないでしょうか。
::beforeはあくまでも疑似要素
W3Cの勧告の日本語訳では疑似要素とは

擬似要素は文書ツリー上に、文書言語によって記された以上の抽象概念を生成する。

とあります。
つまり、要素を擬似的に生成しているという捉え方ではないかと自分は考えています。

今回で言うと、1:1の範囲のwidthを生成しているのはboxというblock要素ですが、その中のheightにあたる部分は::beforeによる擬似的生成された要素によって取られている高さになりますので、どちらの範囲かというとどちらもではないかと考えます。