Automatically copy text from element to :before content attribute

user_1825221 0
Viewed 4593

I'm trying to have a scaled text effect on my header, without creating additional text elements. Trying so, I am using the ::before pseudo element. To create this effect, however, the pseudo-element has to have the same content as the actual element. Since this can't be done in HTML and is quite a lot of work in CSS (as it's located multiple times..), I'm looking for a universal method for all the elements with this effect.

enter image description here

I was thinking of going the jQuery way with a .attr() function to copy the text and append it to the pseudo-element, but as far as I know this can't be done.

$(function() {
  $('h1').each(function() {
    var Text = "$(`this`).text()";
    $('this::before').attr('content', Text);
  });
});

Is there an alternative?

CSS for the effect, currently, is relatively simple.

:before {
  transform: scale(1.5)
  opacity: .2
  content: "text here"
}

pseudo-element css-selectors jquery
1 Answers

You cant access psuedo element with javascript but, you can acces element with CSS. Check the snippet.

h1::before{
  content: attr(data-before);
}
<h1 data-before="Before Content">
Some Content
</h1>

I guess you don't even need javascript. Edited The Snippet.

user_38381160
Related