擬似要素にposition:absoluteを指定すると消える

Question

擬似要素で作成したboxの位置をposition:absoluteで指定して固定したいのですが、指定した瞬間に当該boxが消失してしまいます。
※position:absoluteを削除すると、擬似要素のboxを表示することができます。

何卒よろしくお願いします。

<div class="ex_left">
     <div class="ex_wrapper">
           <div class="ex_img"></div>
           <div class="ex_disc">イタリアのおばあちゃんと手作りパスタを作ろう</div>
     </div>
</div>
                        

.ex_left > .ex_wrapper > .ex_img {
    position: relative;
}
.ex_left > .ex_wrapper > .ex_img::before {
    content: "";
    display: block;
    padding-top: 100%;
    background-color: green;
    position: absolute;
}
.ex_disc {
    background-color: grey;
    border-radius: 0 0 20px 20px;
    height: 50px;
 }

Answer 1

position: absolute; を設定した場合は、width を設定するか、left, right を設定しないと幅0になります。width を指定してください。
例えば、

.ex_left > .ex_wrapper > .ex_img::before {
    content: "";
    display: block;
    padding-top: 100%;
    background-color: green;
    position: absolute;
    width: 100%;
}

ただし、これだと後の要素が上に潜り込みます。

想像するに、やりたいことは、下記のようなことかな？

.ex_left > .ex_wrapper > .ex_img {
    position: relative;
    padding-top: 100%;
}
.ex_left > .ex_wrapper > .ex_img::before {
    content: "";
    display: block;
    padding-top: 100%;
    background-color: green;
    position: absolute;
    top: 0;
    width: 100%;
}
.ex_disc {
    background-color: grey;
    border-radius: 0 0 20px 20px;
    height: 50px;
 }

Comments

[HirotakaKOBORI]

＞想像するに、やりたいことは、下記のようなことかな？
仰る通りです！ご丁寧にありがとうございます。

position:absoluteのイメージについて伺いたいのですが、指定した要素が浮くようなイメージなのでしょうか。
というのも、記載いただいたコード内の
.ex_left > .ex_wrapper > .ex_img {
position: relative;
padding-top: 100%;
}
にpadding-top:100%を指定したのは、.ex_imgに高さを持たせるためだと理解しています。

.ex_imgに高せないと、.ex_discが擬似要素のboxの下に潜り込んでしまうのは、そのboxが浮いているから？でしょうか。

以上、追加質問で恐縮ですがご確認いただけると幸いです。

[hatena19]

そのような理解であってます。

さらに言えば、.ex_imgに高さを持たせることが可能なら、疑似要素を使わなくても、下記で同じ結果にはなります。

.ex_left > .ex_wrapper > .ex_img {
position: relative;
padding-top: 100%;
background-color: green;
}
.ex_disc {
background-color: grey;
border-radius: 0 0 20px 20px;
height: 50px;
}

[HirotakaKOBORI]

ご回答ありがとうございます！大変勉強になりました。引き続きよろしくお願いいたします。