10

I need to duplicate the text for some divs and style it differently. I'm going to use pseudo elements for this.

In regards to the content property, I know I can grab attributes from the parent element like I did in the demo code below, but is there a way to grab the actual text of the parent? I didn't find anything in the docs or online saying it could or couldn't be done.

div::after {
  content: attr(data-text);
  display: block;
}
<div data-text="This is the data-text contetnt">This is the div content</div>

I'll add that if this were to be done in JS it would use the textContent property not the innerHTML property

isherwood
  • 58,414
  • 16
  • 114
  • 157
John_911
  • 1,124
  • 2
  • 21
  • 38
  • Just a reminder - you can't have HTML inside your pseudo element. So if you have a `span` or `em` or any other HTML tags there they would be displayed as is. – dokgu Nov 18 '16 at 17:20

1 Answers1

1

I think youre basically asking if you can get the equivalent of the DOM innerHTML property.

The answer is it cant be done in CSS (CSS "inner-html" technique?)

So you would have to use JS

Community
  • 1
  • 1
Tom Elmore
  • 1,980
  • 15
  • 20
  • Yea kind of. But I don't need any html if there is any. I just need the text of the parent. Nothing associated with the children of the div. – John_911 Nov 18 '16 at 17:37
  • I'll add - Basically like the Node.textContent property in JS – John_911 Nov 18 '16 at 17:43