html – How to show value of an attribute in content: of a pseudo-element?

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>

Example that doesn't work in jsFiddle .

Something like

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

Is it possible to do this with CSS? How? Why?

About browser compatibility, I just need it to run on the latest version of Chrome and Firefox. But if there is a solution that works in any browser it would be nice.

Answer:

CSS doesn't yet have a way to access attributes of a parent element. However it is possible to get an attribute through attr() , documented here in English .

content: attr(title);

So the only way is to adapt the selector to get the element that contains the property.

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

See the example on jsFiddle .