html – How to generate a text with gradient and shadow with CSS?


my question is simple, I would like to know if there is any way to fill the content property with the content of the element in question. Here is an example:

 .saludo::before { content: same; /*Sé que este valor no existe, lo he puesto para que os hagais una idea de lo que busco*/ color: green; }
 <span class="saludo">Hola</span>

Obviously I ask this because in the situation that requires it I would not like to make a simple shadow of the text.

The effect I would like to achieve would be something like this .

And I also don't want to have to write the content of the element by hand ( content: "Hola" ), to make it dynamic.

Thanks in advance.


A solution that I can give you is to use an attribute of the same element for the content, outside of this solution I think the most appropriate is to use javascript

.saludo::before {
  content: attr(data-content);
  color: green;
<span class="saludo" data-content="hola">hola</span>
Scroll to Top