Añadir, reemplazar o cambiar texto con CSS

por

Hola Chicos,

En este tutorial vamos a ver como podemos añadir un texto a través de CSS, incluso como reemplazo un texto existente.

Por supuesto hay otros métodos mejores, modificando el php (si tu web está hecha con WordPress) pero si queremos una solución rápida o no sabemos hacerlo de otra forma nos puede sacar de más de un apuro.

Cómo veremos en este tutorial hacerlo es muy sencillo con un poco de CSS.

Concretamente vamos a aprender a añadir un texto delante de otro existente, añadirlo detrás del texto existente o sustituirlo por el que queramos.

Vamos a hacer un caso real para que se vea más claro.

Aquí tienes el tutorial en vídeo:

Suscríbete a mi canal:

En la siguiente imagen podemos ver unos productos con su nombre de producto:

cambiar titulo productos

Vamos a ver como añadir una palabra delante del nombre de producto.

Para ello vamos a usar el inspector de elementos para ver en que lugar añadir el CSS.

Hacemos click en botón derecho encima de uno de los títulos y veremos una imagen como la siguiente:

inspector elementos

Podemos observar que a la derecha hay un signo +, hacemos click en el y nos aparecerá la siguiente regla css vacía:

regla css vacía

Cómo lo primero que vamos a hacer es añadir un texto por delante del título vamos a complementar la regla css de la siguiente forma:

h2.woocommerce-loop-product__title:before {
	content: "Producto ";
}

Con el código anterior conseguimos que aparezca la palabra producto en todos nuestros títulos:

add palabra before css

Si antes del título del producto lo queremos detrás cambiaremos la regla por la siguiente:

h2.woocommerce-loop-product__title:after {
	content: "Producto ";
}

Si lo que queremos es sustituir el texto por la palabra que queramos tenemos que añadir el siguiente código:

h2.woocommerce-loop-product__title {
	visibility: hidden;
}

h2.woocommerce-loop-product__title:before {
	content: " Producto ";
	visibility:visible;
}

De esta forma, primero, escondemos el nombre del producto y Lugo hacemos visible la palabra que nosotros hemos querido.

El resultado final sería:

quitado titulo css

Recordar que estos cambios los tenemos que añadir en nuestro WordPress.

Para ello vamos Personalizar —> CSS Adicional y añadir nuestro código:

add css wordpress
En ocasiones podremos salir de líos interesantes con un poco de CSS.

Espero que os sea útil y cualquier duda aquí me tenéis 😉

6 comentarios en «Añadir, reemplazar o cambiar texto con CSS»

  1. Viejo, me has salvado. Llevo tiempo tratando de editar un texto dentro de WPBakery, una cosa simple, una caja que dice «Read More» y solo quería traducirlo.
    Hice un montón de cosas, traduje todo el Plugin con Loco Translate, edite código .php, trate de editar directamente el HTML, pero me terminaba dando error.
    Y cuando se me ocurrió editar el texto a través de CSS, pues mis compañeros me indicaron que no se podía.
    Pero gracias a tu Post, pude lograrlo.

    Ya han pasado años desde que esta publicado este post, pero de todas formas, desde la distancia (temporal y espacial), me tomo este momento para agradecértelo.
    Muchas gracias.

Deja un comentario