如何通过CSS获取子元素img的title属性作为伪元素内容？

你猜得没错，仅靠纯CSS无法实现直接获取子元素img的title属性作为父元素li伪元素的content内容。

原因说明 #

CSS的attr()函数只能读取伪元素所属元素（也就是这里的li）自身的属性，没有任何选择器或函数支持跨层级获取子元素的属性值来填充伪元素内容——CSS的选择器逻辑是向下遍历或同级匹配，无法反向从子元素向上传递属性值到父元素的伪元素。

可行替代方案 #

方案1：用JavaScript自动同步属性值 #

如果可以引入JS，这是最灵活的方案，能自动将img的title同步到li的自定义属性上，无需手动维护重复内容：

修改后的JavaScript代码

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('#stage li').forEach(li => {
    const img = li.querySelector('img');
    if (img?.title) {
      li.setAttribute('data-title', img.title);
    }
  });
});

调整后的CSS代码

#stage li::after {
    position: absolute;
    left: 2px;
    bottom: 2px;
    padding: 2px 0;
    width: calc(100% - 4px);
    background: rgba(0,0,0,0.5);
    text-align: center;
    content: attr(data-title); /* 读取li的data-title属性 */
    font-size: 2.0em;
    font-family: Arial;
    color: #fff;
}

修改后的HTML结构（title移到img上）

<ul id="stage" class="fading-slideshow" style="width: 1920px; height: 1080px;">
  <li><img src="2011-09-19 16.45.51 - P1000359.JPG" width="100%" height="100%" title="France (2011)" alt=""></li>
  <li><img src="DSC00008.JPG" title="Test caption 1" alt=""></li>
  <li><img src="DSC00013.JPG" title="Test caption 2" alt=""></li>
  <li><img src="DSC00046.JPG" title="Test caption 3" alt=""></li>
</ul>

方案2：手动同步HTML自定义属性（纯CSS） #

如果不想用JS，可以手动给li添加一个自定义属性（比如data-title），值和img的title保持一致，然后CSS读取这个自定义属性：

修改后的HTML结构

<ul id="stage" class="fading-slideshow" style="width: 1920px; height: 1080px;">
  <li data-title="France (2011)"><img src="2011-09-19 16.45.51 - P1000359.JPG" width="100%" height="100%" title="France (2011)" alt=""></li>
  <li data-title="Test caption 1"><img src="DSC00008.JPG" title="Test caption 1" alt=""></li>
  <li data-title="Test caption 2"><img src="DSC00013.JPG" title="Test caption 2" alt=""></li>
  <li data-title="Test caption 3"><img src="DSC00046.JPG" title="Test caption 3" alt=""></li>
</ul>

CSS代码调整

和方案1的CSS一致，使用content: attr(data-title)即可。

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