My question is simple, I would like to know if there is any way to fill the property content
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'm asking this because in the situation that I require it I wouldn't want to do a simple drop 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 using an attribute of the same element for the content, outside of this solution I think the most appropriate thing is to use javascript
Seeing in the comments the effect you want to achieve, I propose a solution with only CSS and without using the
content
before pseudo-element attribute.To do this, you will need to make use of a
linear-gradient
which, combined with the CSS3 properties,-webkit-background-clip: text
will-webkit-text-fill-color: transparent
allow you to add a gradient text.Additionally, you can add a border to the text using the
-webkit-text-stroke
.Finally, you can use the property
filter: drop-shadow
that acts astext-shadow
but you can apply it to the background.