¿Es posible hacer que el contenido de <a href="">bla</a> esté vacío (solo el espacio <a href=""></a>) con CSS y tener un objeto vacío posible para hacer clic en él? En caso afirmativo, ¿cómo puedo lograr esto? Gracias

0
Jason Derrick 24 oct. 2019 a las 01:31

3 respuestas

La mejor respuesta

Prueba esto

.link {
  display: block;
  width: 30px;
  height: 30px;
  background: #ccc;
  font-size: 0;
}
<a class="link" href="#">bla</a>
0
James 23 oct. 2019 a las 22:40

Puedes probar esto.

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          .try-to-hde { 
             display: none;
           }
           a.show-blan-space { 
             display: inline-block;
             background: blue;
             width: 50px;
             height: 50px;
           }
         </style>
        </head>
        <body>
          <a class="show-blan-space" href=""><span class="try-to-hde">bla</span></a>
         </body>
    </html>
0
mahadev kalyan srikanth 23 oct. 2019 a las 22:55

Si. No coloque nada entre la etiqueta de anclaje de apertura y cierre. Dale a la etiqueta de ancla un nombre de clase. Luego, si le da una altura y un ancho junto con hacer que el elemento sea display: block; o display: inline-block;, tendrá un espacio en blanco en el que se puede hacer clic. También puedes aplicar un color de fondo o lo que tu corazón desee.

.blank-link {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-color: red; //if you desire a background-color
  }
<a href="#" class="blank-link"></a>

Cambiar la pantalla a block o inline-block es realmente importante porque las etiquetas de anclaje predeterminadas son display: inline;. Cuando está en línea, su altura y ancho no harán nada.

editar Después de ver la otra respuesta, ahora me doy cuenta de que tiene texto que desea ocultar. font-size: 0 funcionará. También puede usar color: transparent; o incluso opacity: 0; si no tiene un color que desea que esté visible en el fondo.

0
Brett Parsons 23 oct. 2019 a las 23:07