如何使用CSS将属性显示为文本？

Question

我想将属性的值显示为文本。

<div title="12:56pm">
    <span data-measureme="1">

        <span>hi</span>

    </span>
</div>

不工作example on jsFiddle。

像

这样的东西

div > span:before {
    content: parent.title;
}

可以用CSS做到吗？如何/为什么？

关于浏览器兼容性，我只需要在最新的Chrome和Firefox上运行它。但是，如果有一个可以在任何浏览器上运行的解决方案，那就太好了。

Answer 1

有一种方法可以在CSS中描述使用属性。你只需使用：

content: attr(title);

但是，您在代码中遇到的问题是您只能在被引用的元素上使用此attr()函数。在您的情况下，span没有title属性。您可能需要考虑重新编写代码以允许以下内容：

div:before {
    content: attr(title);
}

Answer 2

我认为你不能获得parent属性，但是你可以得到它自己的属性：

<a title="Did this work..? " href="#">Yep, it worked</a>

使用这个CSS：

a:before {
  content: attr(title);
}

结果（或显示为......）：

<a title="Did this work..? " href="#">Did this work..? Yep, it worked</a>

或者检查我的小提琴：

http://jsfiddle.net/Milanzor/SxNf9/

Answer 3

试试这个：

 div[title]:after { 
content: attr(title); /* no quotes around attribute name! */
 }

IE7不支持

唯一可能是使用Javascript / Jquery。

Link