Question

I’m looking to customise the CSS of a site I regularly use.

My question relates to a title tag of an element (below).

<span title="42%" class="progress"><span style="width: 42%;" class="indicator">
</span></span>

I’d like to take this title tag (42% in this case, but changing dynamically) and display it as text using CSS.

The tricky part obviously comes from the fact that this unit changes dynamically.

Is there a way to say ‘display the unit inside the title ” ” as text’ using CSS.

Thanks in advance, all help appreciated.

Tom Perkins

Answer 1

If you mean displaying the title attribute along with your existing text/elements instead of as a custom-designed tooltip, some browsers support the CSS attr() function:

.progress:after {
    content: attr(title);
}

See this jsFiddle example.