使用CSS3attr函数使用子节点中父节点的属性值

我想data-index在其(嵌套)子节点之一上设置父元素的值.期望的结果:字符串"index"应该出现在h2.heading.

标记:

    

        
title
    

CSS(第一条data-index规则有效 - 但不是在正确的地方):

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

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

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

http://codepen.io/anon/pen/jyxdoz

更新

解决方法可能是直接在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;
}

  

    
title