9

mi pregunta es sencilla, querría saber si existe alguna forma de rellenar la propiedad content con el contenido del elemento en cuestión. Os dejo aquí un ejemplo:

.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>

Obviamente pregunto esto porque en la situación que lo requiero no me gustaría hacer una simple sombra corrída del texto.

El efecto que me gustaría conseguir sería algo como esto.

Y tampoco quisiera tener que escribir el contenido del elemento a mano (content: "Hola"), para que sea dinámico.

Gracias de antemano.

6
  • ¿Puedo preguntar por qué quieres hacer esto? Porque tener el mismo texto duplicado dos veces no es algo realmente útil, debe haber algún motivo por el que quieras hacerlo. ¿Cuál es el objetivo final que quieres alcanzar?
    – Alvaro Montoro
    Commented el 5 abr. 2018 a las 13:15
  • 3
    Se trata de un efecto en el texto, es simplemente curiosidad por aprender cosas nuevas.
    – Saul
    Commented el 5 abr. 2018 a las 13:22
  • La curiosidad es buena y esta pregunta es interesante. La cosa es que muchas veces este tipo de preguntas acaban siendo problemas XY y pensaba que igual éste podría ser uno de esos casos.
    – Alvaro Montoro
    Commented el 5 abr. 2018 a las 13:32
  • 1
    Espero que no, simplemente quería saber si se puede hacer mediante un valor de content, pero cualquier otra forma me sirve igual.
    – Saul
    Commented el 5 abr. 2018 a las 13:45
  • Igual se podría intentar con varios text-shadows pero creo que esa perspectiva sería imposible de conseguir sin pseudo-elementos.
    – Alvaro Montoro
    Commented el 5 abr. 2018 a las 14:00

2 respuestas 2

5

Una solución que te puedo dar es utilizando para el contenido un atributo del mismo elemento, fuera de esta solución creo que lo mas apropiado es usar javascript

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

4
  • Ya bueno, igualmente, no sería dinámico, y tendría que reescribir el contenido del elemento en el atributo, pero gracias por la respuesta.
    – Saul
    Commented el 5 abr. 2018 a las 12:08
  • claro si cambias el contenido del span tendrías que cambiar el contenido del atributo data-content para que funcione
    – LPZadkiel
    Commented el 5 abr. 2018 a las 12:09
  • Me temo que la única forma de hacerlo dinámico va a ser con JS
    – Saul
    Commented el 5 abr. 2018 a las 12:10
  • pienso que con js es la única forma
    – LPZadkiel
    Commented el 5 abr. 2018 a las 12:17
3

Viendo en los comentarios el efecto que quieres conseguir te propongo una solución únicamente con CSS y sin utilizar el atributo content del pseudo-elemento before.

Para ello, necesitarás hacer uso de un linear-gradient que, combinado con las propiedades de CSS3-webkit-background-clip: text y -webkit-text-fill-color: transparent te permitirá agregar un texto con degradado.

Además, le puedes agregar un borde al texto mediante la propiedad -webkit-text-stroke.

Por último, podrás utilizar la propiedad filter: drop-shadow que actúa como text-shadow pero se la puedes aplicar al fondo.

.textoPersonalizado{
  background: linear-gradient(yellow, green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px black;
  filter: drop-shadow(2px 2px #ff0080);
  font-size: 60px;
}
<p class="textoPersonalizado">ZONA DE RETOS</p>

14
  • Testeado en Google Chrome 65, Firefox 57 y Edge 41. Commented el 6 abr. 2018 a las 19:06
  • Gracias por tu respuesta, muy interesante lo de filter, pero la razón por la cual no quería utilizar sombras es por la perspectiva, lo hice de esta forma, como puedes ver hay dos pseudo-elementos, uno para el borde y otro para la "sombra" en perspectiva. Gracias a tu respuesta el borde podré ponerlo con filter.
    – Saul
    Commented el 7 abr. 2018 a las 10:30
  • Aunque el verdadero motivo de mi pregunta es poner el contenido de un elemento en la propiedad content del pseudo-elemento, el ejemplo de las sombras es simplemente para justificarlo con un caso práctico.
    – Saul
    Commented el 7 abr. 2018 a las 10:33
  • @Saul Perdona, edité tu pregunta ya que vi en los comentarios que lo que estabas buscando era eso y por focalizar el problema para el cual estaba destinado la pregunta pero puedes volver a editarla si estoy equivocado, por supuesto :P. No me fijé en que necesitabas un borde también, voy a intentar editar la respuesta para conseguir el efecto que buscas. Commented el 7 abr. 2018 a las 10:38
  • 1
    Oh, si, me sonaba que existía, muchas gracias :)
    – Saul
    Commented el 7 abr. 2018 a las 17:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.