1

Estoy intentando realizar el cambio de color de una palabra en el cual recibo ej.: "EDU MOLA" y las 2 últimas letras de la palabra que sea deben ir en rojo.

.molon:last-letter {
  color: red;
}
     
 <p class='molon'> EDU MOLA </p>

La cuestión es que ese last-letter no funciona (Y en el caso de que lo haría pintaría la A no las 2 últimas). He probado con:

.molon:last-child{

El problema aquí es que pinta toda la palabra.

La dificultad radica en que este texto será insertado en html mediante un "grid":

{
  "name": "descripcion",
  "index": "descripcion",
  "align": "left"
}

Por lo que yo no genero el html... así que las soluciones de

<p class='molon'> EDU MO<span color_rojo>LA </span></p>

Lo siento pero no valen. Estaba practicando a ver como obtener las 2 últimas letras con css pero como comenté al principio me está dando problemas.

Gracias.

1 respuesta 1

1

Esto es un poco bruto, pero puede dar el pego:

.molon::after {
  color: red;
  content: 'LA';
  position: absolute;
  transform: translate(-100%, 0);
}
 <p class='molon'>EDU MOLA</p>

Básicamente lo que hace es superponer el content en la misma posición donde esta el texto. Entiendo que en el snippet funciona pero no estoy muy seguro que lo consigas alli donde quieras ponerlo realmente.

1
  • El problema es que puede llegar 2 tipos de palabras finales: ON OFF, si sigo tu ejemplo tendría que crearme 2 clases y aplicar esos estilos si contienen esa palabra, todo esto en el grid, probaré a ver qué tal sale, gracias.
    – EduBw
    Commented el 18 ene. 2022 a las 16:29

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.