I am looking to replicate the text within certain divs and apply different styles to each of them. My plan is to utilize pseudo elements for achieving this.
When it comes to using the content
property, I understand that I can extract attributes from the parent element as demonstrated in the code snippet below. However, I am unsure if there is a way to directly access the actual text content of the parent element. Despite searching through documentation and online resources, I couldn't find a definitive answer on whether this is possible or not.
div::after {
content: attr(data-text);
display: block;
}
<div data-text="This is the data-text contetnt">This is the div content</div>
One thing to note is that if this task were to be carried out using JavaScript, the textContent
property should be utilized instead of the innerHTML
property.