Truco en CSS: cambia texto por otro o ocúltalo.

Si tenéis conocimientos de CSS, seguramente ya sabréis cómo ocultar texto por CSS. Tenéis tres maneras:

1. Le ponéis a la etiqueta (id o clase) del texto un display:none
2. Cambiais el color de texto a color:transparent o al color del fondo.
3. Ponéis el texto con visibility: hidden.

La primera hace desaparecer lo que quites, tanto para robots como para usuarios. El problema es que muchas veces hace desaparecer también el contenedor (por ejemplo la altura de línea). Y puede que no queramos, por ejemplo para el truco de hoy.
Las dos últimas tienen un problema desde el punto de vista SEO. Los usuarios van a leerlo, porque básicamente lo estamos ocultando. Pero los robots ignorarán el CSS y puede ver ese texto. Así que puede indexarse y hasta aparecer en Google. Así que tienes que tener cuidado con qué texto ocultas y debe ser una última solución cuando todo lo demás falla (es mejor quitarlo por programación).

Cómo cambiar texto por otro en CSS.

Usando el proceso anterior, os vamos a mostrar un truco para cambiar un texto de una web por otro.
Por las razones anteriores de los robots, este debe ser el último recurso. Antes debemos probar cambiarlo por código (Html5, php, Javascript, Php…). Pero si no podemos, siempre nos queda esta opción.

Para cambiar texto por CSS:

• primero tenemos que poner un visibility:hidden en el id del texto que queremos cambiar. Esto hará que no se vea, pero la “línea” seguirá ahí. Por ejemplo:
  
  #loquequieroocultar {visibility: hidden;}
  
• Después cogemos la etiqueta y añadimos un ::after, incluyendo contenido en ese after y forzando que tenga visibilidad (porque si no coge la del padre). Además, lo moveremos a la izquierda con un float:left y podemos colocar con el padding-left adecuado. Por ejemplo
  
  #loquequieroocultar { content:"Frase que quiero poner";
visibility: hidden;
float:left;}

Con esto veréis que tenemos el text que necesitábamos.
En este vídeo enseñamos el proceso.