How can I show an attribute as text with CSS?

css, html

Solution

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);
}

Problem

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.

Original source