你应该提供一个你尝试过的例子，最好是一个可以执行的代码片段，让我们看到。
也就是说，您所描述的内容听起来像是<figure>和<figcaption>元素的用途：

<figure>
  <img src="https://via.placeholder.com/300" alt="" />
  <figcaption>This is your caption</figcaption>
</figure>

如果元素的内容被限制为带样式的纯文本，则可以使用css策略，使用伪元素::after
考虑一下，正如注解中强调的那样，这个解决方案并没有满足可访问性方面的问题。
这只是一个尝试，只使用css来达到给定的结果，但打破了一些规则。
我将把它留在这里，告诉你如何不这样做。

.gallery{
  display: flex;
  gap: 1em;
}

#target{
  outline: solid red 4px;
  width: 100px;
  height: 200px;
  display: block;
  position: relative;
}

#target::after{
  content: attr(data-caption);
  position: absolute;
  bottom: 0;
  left: 0;
  outline: solid 1px gray;
  width: 100%;
  text-align: center;
}

<div class="gallery">
  <img src="404_1.jpg" alt="<img>" id="target" data-caption="Caption 1...">
  <img src="404_2.jpg" alt="<img>" id="target" data-caption="Caption 2...">
  <img src="404_3.jpg" alt="<img>" id="target" data-caption="Caption 3...">
  <img src="404_4.jpg" alt="<img>" id="target" data-caption="Caption 4...">
</div>