使用CSS attr()设置网站图片动态标签失败，求排查解决

安全阿岳

2026-8-8

图片署名标签不显示的问题排查与修复

核心错误点

语法不兼容：你使用的attr(data-content, "Photo credit: Me")是CSS草案阶段的语法，目前主流浏览器均未支持这种带默认值的写法，这是标签内容完全不显示的关键原因。
属性挂载位置错误：你把data-content属性加在了<img>标签上，但伪元素.image::after是绑定在<span class="image">元素上的，CSS无法跨层级读取子元素的自定义属性。

修正后的代码实现

CSS 部分

采用兼容性更好的方式实现“默认值+自定义内容”的效果：

/* Image */
.image {
  border: 0;
  display: inline-block;
  position: relative;
}
/* 有自定义署名时显示对应内容 */
.image[data-content]::after {
  content: attr(data-content);
}
/* 无自定义署名时显示默认文本 */
.image:not([data-content])::after {
  content: "Photo credit: Me";
}
.image::after {
  position: absolute; 
  bottom: 0; 
  right: 3em; 
  font-size: 0.7em; 
  color:rgba(0, 0, 0, 0.175);
}
.image img {
  display: block;
}
.image.left, .image.right {
  max-width: 30%;
}

HTML 部分

将data-content属性移到<span class="image">标签上：

<div class="row">
  <p> 
    <span class="image left" data-content="Photo credit: Others">
      <img src="images/image_1.png">
    </span>
  </p>
</div>