升级CMS后用CSS将图片title转为下方标题（无需修改HTML）

要实现将带.caption类的图片的title属性内容显示在图片下方，无需修改现有HTML，可以使用以下CSS方案：

img.caption {
  display: table;
  margin: 0 auto 1em; /* 保留图片居中效果，同时为标题预留下方空间 */
}

img.caption::after {
  content: attr(title); /* 提取图片的title属性值作为内容 */
  display: table-caption;
  caption-side: bottom; /* 将标题置于图片下方 */
  text-align: center; /* 标题居中对齐 */
  font-size: 0.9em; /* 可根据需求调整字体大小 */
  color: #555; /* 可根据需求调整标题颜色 */
  padding-top: 0.5em; /* 调整标题与图片的间距 */
}

方案原理 #

由于<img>是替换元素，直接添加伪元素的兼容性有限，通过将图片设置为display: table，再利用table-caption的特性，能可靠地将伪元素内容作为标题固定在图片下方，同时继承图片的居中对齐特性，完美匹配原有布局。

自定义调整 #

• 若需要调整标题与图片的距离，修改padding-top或图片的margin-bottom值即可；
• 可根据网站风格调整标题的字体、颜色、行高等样式；
• 如果图片的title属性为空，该伪元素会自动隐藏，不会产生多余内容。

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