¿Hay alguna manera de ocultar un nodo de texto manteniendo el fondo y el tamaño del elemento sin cambiar su color, usando etiquetas anidadas o superponiéndolo con un pseudo-elemento solo con CSS?

button {
  color: transparent;
}
<button>text node</button>

Lo anterior es lo que quiero lograr, pero no quiero hacerlo cambiando el color. No quiero superponerlo con algo del mismo fondo como un pseudo-elemento. No quiero usar etiquetas anidadas como span para cambiar su visibilidad también. ¿Algunas ideas?

0
sdvnksv 25 sep. 2019 a las 19:36

3 respuestas

La mejor respuesta

Bien, después de un poco de investigación y un consejo de un compañero desarrollador, se me ocurrió lo siguiente:

button {
  text-indent: -1000000%;
}
<button>some text here</button>

Asegúrese de mantener el valor text-indent en %. De lo contrario, también afectará el ancho del botón.

0
sdvnksv 25 sep. 2019 a las 17:51

Puedes envolver el contenido y usar la regla visibility:hidden css.

button > span {
  visibility: hidden;
}
<button>
  <span>
    hidden text
  </span>
</button>
0
rlemon 25 sep. 2019 a las 16:53

Pruebe Esto

p {
    font-size: 0;
}
0
Friend 25 sep. 2019 a las 16:50