如何实现纯CSS读取img属性值生成自定义图片Tooltip提示效果

问题根因 #

你写的代码不生效是因为 <img> 属于替换元素，这类元素的内容由外部资源填充，本身没有内部DOM内容节点，规范层面就不支持 ::before、::after 伪元素，所以伪元素的样式不会被渲染。你在div上可以生效，就是因为div是普通的非替换元素，支持伪元素插入。

可行解决方案 #

你只需要给img套一层普通的容器元素，把Tooltip相关的伪元素挂载到容器上即可，纯CSS就能实现，调整后的代码如下：

HTML调整

<!-- 给img套一层容器，把data-caption属性放到容器上 -->
<div class="img-caption-wrapper" data-caption="this is my caption">
  <img src="blabla.jpg" />
</div>

对应CSS代码

/* 容器适配图片尺寸，做定位父级 */
.img-caption-wrapper {
  position: relative;
  display: inline-block;
  line-height: 0; /* 消除图片默认的底部留白 */
}

/* 伪元素挂载到容器上，读取容器的data-caption值 */
.img-caption-wrapper::after {
  content: attr(data-caption);
  position: absolute;
  bottom: 2em;
  left: 2em;
  z-index: 2;
  /* 可选：补充Tooltip基础样式优化显示效果 */
  padding: 6px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  /* 可选：hover才显示的交互效果 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.img-caption-wrapper:hover::after {
  opacity: 1;
}

补充说明 #

如果不想把data-caption属性移动到容器上，纯CSS无法直接读取img元素的属性给父元素的伪元素使用，这种场景下可以写几行极简JS同步属性，示例如下：

document.querySelectorAll('img[data-caption]').forEach(img => {
  const wrapper = document.createElement('div')
  wrapper.className = 'img-caption-wrapper'
  wrapper.dataset.caption = img.dataset.caption
  img.parentNode.insertBefore(wrapper, img)
  wrapper.appendChild(img)
})

内容的提问来源于stack exchange，提问作者tkwebreform