relevo - ocultar y mostrar texto con css3

¿Cómo escondo el texto de anclaje sin ocultar el anclaje?

Question

decir que tengo el siguiente marcado:

<li><a href="somehwere">Link text</a></li>

Si tengo una imagen de fondo en la etiqueta a ¿cómo podría ocultar el texto del enlace usando solo css? font-size: 0 parece funcionar bien en la etiqueta a aparte de en ie7 muestran pequeños blobs.

Gracias

• Gracias por la ayuda hasta el momento iv usado line-height: 0; y tamaño de letra: 0; y sangría de texto: -999px; pero todavía aparece algunos blobs en safari, ¿alguna idea?

Answer 1

¿Qué tal display: none;

Eso oculta cualquier cosa.

Answer 2

Envuelva el texto en un lapso y establezca la visibility:hidden; La visibilidad oculta ocultará el elemento pero ocupará el mismo espacio en la página (a la inversa: ninguno lo elimina de la página).

Answer 3

He seguido la mejor respuesta de Loktar y funcionó muy bien. El único problema que tuve fue con Chrome (mi versión actual es 27.0.1453.94 m). El problema que tuve fue que parece que Chrome es consciente de que el texto en el enlace no es visible y pone el enlace un poco más bajo de lo que se supone que es (algo así como margen superior, pero no es posible cambiarlo) ) Esto sucede con todas las formas en que hacemos invisible el texto: - line-height: 0; - font-size: 0; - texto-sangría: -9999px;

Pude solucionar este problema ajustando la alineación vertical del enlace de esta manera:

vertical-align: 25px;

Espero que esto sea útil

Answer 4

Mini consejo:

Tuve la siguiente situación:

<a href="/page/">My link text
:after
</a>

Oculte el texto con tamaño de fuente: 0, así que podría usar un ícono de FontAwesome para él. Esto funcionó en Chrome 36, Firefox 31 e IE9 +.

No recomendaría color: transparente porque el texto stil existe y es seleccionable. Usar line-height: 0px no me permitió usar: after. Tal vez porque mi elemento era un bloque en línea.

Visibilidad: oculto : no me permitió usar: después.

texto-sangría: -9999px; : También movió el elemento: after

Answer 5

Otra opción es esconderse en base a la clase bootstraps "sr-only". Si ajusta el texto en un lapso con la clase "sr-only", el texto no se mostrará, pero los lectores de pantalla seguirán teniendo acceso al mismo. Entonces tendrías:

<li><a href="somehwere"><span class="sr-only">Link text</span></a></li>

Si no está utilizando el arranque, aún conserve lo anterior, pero también agregue el css siguiente para definir la clase "sr-only":

.sr-only {position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0 0 0 0);  border: 0; }

Answer 6

Pude solucionar este problema configurando font-size: 0 .

Answer 7

Solo necesita agregar font-size: 0; a su elemento que contiene texto. Esto funciona bien

Answer 8

Tratar

 a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }

El color: transparent; cubre un problema con los navegadores Webkit que todavía muestran 1px del texto.

Answer 9

a { text-indent:-9999px; }

Tiende a funcionar bien desde mi experiencia.

Answer 10

text-indent :-9999px 

Funciona perfectamente.