John_911
John_911

Reputation: 1170

Is it possible for a pseudo element to inherit the text of the parent element?

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

Upvotes: 14

Views: 6463

Answers (1)

Tom Elmore
Tom Elmore

Reputation: 1980

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

Upvotes: 1

Related Questions