img :: after img src包含后不显示

Question

我有一个<img>，我希望在其上显示文字叠加层。

我想在图片底部显示文字叠加层 - 但我不知道图像的高度。 （有许多图像，都具有相同的标准宽度，但宽度/高度比率因图像而异。）

一种方法是使用绝对定位的img::after：

main > figure {
display:inline-block;
position:relative;
width:400px;
height:284px;
background-color:rgb(0,0,127);
}

main > figure img {
display:block;
position:relative;
width:376px;
height:200px;
margin:12px auto;
background-color:rgb(255,255,0);
}

main > figure img::after {
content:'Example text overlay';
position:absolute;
display:block;
bottom:0;
left:0;
width:100%;
height:36px;
background-color:rgb(255,0,0);
}

<main>

<figure>
<img src="" alt="Image of variable height" />
</figure>

</main>

到目前为止，非常好。

但是只要我添加图片src。 ::after伪元素消失：

main > figure {
display:inline-block;
position:relative;
width:400px;
height:284px;
background-color:rgb(0,0,127);
}

main > figure img {
display:block;
position:relative;
width:376px;
height:200px;
margin:12px auto;
background-color:rgb(255,255,0);
}

main > figure img::after {
content:'test';
position:absolute;
display:block;
bottom:0;
left:0;
width:36px;
height:36px;
background-color:rgb(255,0,0);
}

<main>

<figure>
<img src="http://placehold.it/376x200" alt="Image of variable height" />
</figure>

</main>

我认为伪元素必须位于图像文件下面。

但是如何在图像文件上方显示它？

我已经尝试弄乱z-index无济于事。

opacity也没有运气。