How can I show an attribute as text with CSS?

Question

I want to show the value of an attribute as text.

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

        <span>hi</span>

    </span>
</div>

Not working example on jsFiddle.

Something like

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

Is it possible to do it with CSS? How/why?

About browser compatibility, I only need it to run on latest Chrome and Firefox. But if there is a solution that could work on any browser it would be nice.

Answer 1

There is a way of using attributes as you're describing in CSS. You'll simply use:

content: attr(title);

However, the issue you're having in your code is that you can only use this attr() function on the element being referenced. In your case, the span doesn't have a title attribute. You might want to consider reworking your code to allow for something such as:

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