Html 如何在垂直条上方放置图像？

我正在使用flexbox创建一个等级系统层，我想在这些条上添加一个图像（缩略图），但是我不知道如何做。红色的圆圈意味着一个图像将在那里一个小的可能50x50像素或更少，但我如何才能添加上面的图像

.post内容包装器{
填充：20px；
边缘底部：2米；
位置：相对位置；
最大宽度：900px；
左边距：自动；
右边距：自动；
背景色：#f7f7f7；
边界半径：7px；
框大小：边框框；
}
.flex7{
显示器：flex；
高度：300px；
证明内容：之间的空间；
对齐项目：柔性端；
}
.flex{
背景色：#f7f7f7；
边界半径：3px；
填充：20px；
}
.7-child-1{
身高：40%；
}
.7儿童{
宽度：14%；
}
.孩子{
边界半径：3px；
背景色：#A2CBFA；
边框：1px实心#4390E1；
框大小：边框框；
盒影：0.2px 2px rgba（0,90250,0.05）、0.4px 4px rgba（0,90250,0.05）、0.8px 8px rgba（0,90250,0.05）、0.16px 16px rgba（0,90250,0.05）；
}
.7-child-2{
身高：50%；
}
.7-child-3{
身高：60%；
}
.7-child-4{
身高：20%；
}
.7-child-5{
身高：30%；
}

---

您可以使用伪css类（例如：after或：before） . 此示例仅显示第一个条形图的解决方案

.post内容包装器{
填充：20px；
边缘底部：2米；
位置：相对位置；
最大宽度：900px；
左边距：自动；
右边距：自动；
背景色：#f7f7f7；
边界半径：7px；
框大小：边框框；
}
.flex7{
显示器：flex；
高度：300px；
证明内容：之间的空间；
对齐项目：柔性端；
}
.flex{
背景色：#f7f7f7；
边界半径：3px；
填充：20px；
}
.7-child-1{
身高：40%；
位置：相对位置；
}
.7-child-1：之前{
内容：''；
位置：绝对位置；
背景图像：url（'https://via.placeholder.com/50.png');
背景重复：无；
背景位置：中心；
背景尺寸：包含；
顶部：-60px；
左：0；
右：0；
保证金：0自动；
显示：块；
宽度：50px；
高度：50px；
}
.7儿童{
宽度：14%；
}
.孩子{
边界半径：3px；
背景色：#A2CBFA；
边框：1px实心#4390E1；
框大小：边框框；
盒影：0.2px 2px rgba（0,90250,0.05）、0.4px 4px rgba（0,90250,0.05）、0.8px 8px rgba（0,90250,0.05）、0.16px 16px rgba（0,90250,0.05）；
}
.7-child-2{
身高：50%；
}
.7-child-3{
身高：60%；
}
.7-child-4{
身高：20%；
}
.7-child-5{
身高：30%；
}

---

检查css伪类，如：before和：after