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

Asked

Viewed 399 times

5

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?

Regarding 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 would be nice.

html css css3

  • I did not understand the reason of Downvote’s, I put +1 because I believe that this issue is not bad.

  • I personally find the question good and simple and that serves to answer other questions that were more confused, I edited the title, because I believe that maybe the downvotes were the difficulty to understand and also I leave a +1

2 answers

9


CSS yet does not have a way to access attributes of a parent element. However it is possible to obtain an attribute through attr(), documented here in English.

content: attr(title);

This way the only way is to adapt the selector to take the element that contains the property.

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

See the example in jsFiddle.

  • I do not know why you had received down vote. He replied that there is no way and gave a closer example than was asked.

  • 2

    I don’t see a real application for this .-.

  • @Willianribeiro I’ve used, because some elements I apply with a control of data- in a kind of "web Component", but for browsers without support for such technology (web Component). I think the question is very simple, but still serves to cover all cases of similar problems (I found 3 new questions with problems that would solve), I hope everyone here agree.

1

Maybe if you put one value or a placeholder. Your question was confused.

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.