更新

一种解决方法是直接在html元素上设置一个CSS变量并使用它。

div.foo[data-index] .heading span {
    display: none;
}

div.foo[data-index] .heading::after { 
    content: var(--index);
    color: red;
    border: 1px solid red;
}

个字符

原创

目前还不能这样做（* 如前所述，attr只对当前元素有效 *）。
将来，当attr()可以用于content之外的属性时，结合css变量，您可以这样做。

div.foo[data-index] .heading span {
  display: none;
}
div.foo[data-index] {
  --data: attr(data-index);
  --index: var(--data);
}
div.foo[data-index] .heading::after {
  content: var(--index);
  color: red;
  border: 1px solid red;
}

<div class="foo" data-index="index">
  <div>
    <h2 class="heading"><span>title</span></h2>
  </div>
</div>

的字符串

还有一个选择：
如果该值是可继承的，并且不直接在子级上设置。然后你也可以用attr()把它分配给parent，让继承做它的事情。

你可以使用这个CSS。

div.foo[data-index]::after, div.foo[data-index]::before { 
    content: attr(data-index);
    color: green;
}

div.foo[data-index] .heading::after { 
    content: attr(data-index);
    border: 1px solid red;
}

字符串
注意:before伪元素的使用。
我想这就是你要找的。