Question

我不知道这是否可行，但我们非常感谢任何帮助。

我的HTML代码中包含此代码：

<img src="mountains.jpeg" class="green inline-image" data-caption="A picture of mountains!">

其中data-caption是自定义属性。

我想做点like this。

如您所见，data-caption必须位于图像正下方的小方框中，其宽度与图像完全相同。我不知道这是否可能，所以如果没有，你能推荐一种替代方法吗？

我尝试过这样的事情：

<img src="mountains.jpeg" class="green inline-image">
<div class="photo-caption">
    A picture of mountains!
</div>

CSS：

.inline-image {
    width:30%;
}

.photo-caption {
    width:30%;
    background-color:blue;
}

这样做有效，但我不想为每个标题创建一个新的<div>。我宁愿在<img>代码中使用它。

非常感谢！

Answer 1

是的，可以使用css content，但在你的情况下问题是你在img元素上使用它，它不会对某些browsers起作用。

我建议采用不同的方法是将img元素插入div并在其中包含该自定义属性。

<强> HTML：

<div class="img-block" data-caption="A picture of mountains!">
  <img src="mountains.jpeg" class="green inline-image" >
</div>

<强> CSS

.img-block:after {
  content: attr(data-caption);
}