Set content attribute of CSS as value between the brackets of HTML

Question

In the scenario where the HTML look as follows:

<div>Text</div>

How can I get the value from between these tags ("Text", in this case) to be added as a value of CSS content attribute?

This how I would do it using React's term of that value:

div {
    content: attr(children)
}

Can you explain why you'd need to do this? Seems like an [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) (asking for help with the *solution* to a problem, rather than the problem itself.) — Tyler Roper, Aug 08 '18 at 19:57
@TylerRoper Good point. I am trying to implement the solution from this answer in my application: https://stackoverflow.com/a/20249560/7741897 Did not want to create a duplicate and asking this question in comments of the answer that I linked would not allow to be descriptive enough and neither would deliver the answer to my question promptly. — Eduard, Aug 08 '18 at 20:02

score 0 · Answer 1 · answered Aug 08 '18 at 20:11

I don't know why you would need to do this but, you can in a way. I've included an example below but, it would help to know what your objective is.

var elem = document.getElementsByTagName("DIV");

elem[0].setAttribute('children',elem[0].textContent);

div:after {
  content: attr(children)
}

<div>Text</div>

score 0 · Answer 2 · answered Aug 08 '18 at 20:13

div:before{content:attr(data-text)}

<div data-text="text"></div>

i think you want to get that text using css so here is the way to get text via data attribute and css

<div>text</div>

    TO

<div data-text="text">
      If you want to place same text as data attr then put it
</div>

Now you can simpel put the css like

    div:before { 
       content: attr(data-text)
     }

Hope you this will helps you

Thanks

2 Answers2