¿Cómo oculto anclar texto sin ocultar el ancla

decir que tengo el siguiente marcado:¿Cómo oculto anclar texto sin ocultar el ancla

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

si tengo una imagen de fondo en la etiqueta a cómo iba a ocultar el texto del enlace usando sólo CSS? font-size: 0 parece funcionar bien en la etiqueta a aparte de en ie7 muestran pequeños blobs.

Gracias

gracias por ayudar en lo que va iv utilizado 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?

Fuente

2011-03-14 geoffs3310

161

Trate

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

El color: transparent; cubre un problema con los navegadores Webkit sigue mostrando 1px del texto.

Fuente

2011-03-14 15:30:34 Loktar

sí que funcionó mucho gracias :-) – geoffs3310

He encontrado que esto no funciona en Chrome 15.0.874.120. También tiene que agregar color: transparente; – brokenindexfinger

@brokenindexfinger raro ... pero agregar color: ¿transparente funciona entonces? Si es así, siéntete libre de editar mi respuesta y agregarla, o puedo. – Loktar

a { text-indent:-9999px; }

Tiende a funcionar bien desde mi experiencia.

Fuente

2011-03-14 15:33:21 Mig

Ah, bien ni siquiera pensé en eso, lo uso todo el tiempo para encabezados con imágenes. – Loktar

no es bueno para SEO aunque .. – blackhawk

@blachawk: explique por qué no es bueno para SEO – xsl

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

Fuente

2011-03-14 15:45:00 scrappedcola

Gracias scrappedcola, esta es una gran solución ! – blackhawk

esta es la solución adecuada, pero utilicé display: none para eliminar todos los tamaños. –

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 está visible y pone el enlace un poco más bajo de lo que se supone que es (algo así como margin-top, pero no es posible cambiarlo eso). Esto ocurre con todas las formas en que hacemos invisible el texto: - altura de línea: 0; - font-size: 0; - texto-sangría: -9999px;

que era capaz de solucionar este problema ajustando la vertical-align del enlace de la siguiente manera:

vertical-align: 25px;

espero que esto sea útil

Fuente

2013-05-29 22:29:39 Simo

-5

¿Qué tal display: none;

que esconde nada.

Fuente

2013-09-06 17:51:07

no - eso oculta el ancla –

text-indent :-9999px

Funciona impecablemente.

Fuente

2013-10-12 21:16:16 Ajey

Mini consejo:

que tenía el siguiente escenario:

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

I hided el texto con font-size: 0, por lo que podría utilizar un icono FontAwesome por ello. Esto funcionó en Chrome 36, Firefox 31 e IE9 +.

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

Visibilidad: oculta: No me permitió usar: after.

text-indent: -9999px;: También se movió el: después del elemento

Fuente

2014-07-30 07:55:57 com2ghz

sí, tuve un problema con los pseudo elementos también y esto se encargó de eso ... ¡gracias! –

Otra opción es ocultar basado en la clase "sr-only" de bootstraps. 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. Por lo que tendría:

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

Si no está utilizando de arranque, aún mantienen la anterior, sino también añadir el siguiente CSS para definir el "sólo sr" clase:

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

Fuente

2016-05-13 18:56:45 joeshmoe301

sólo tiene que agregue font-size: 0; a su elemento que contiene texto. Esto funciona bien.

Fuente

2017-03-01 12:14:08

-1

Pude solucionar este problema configurando font-size: 0.

Fuente

2017-03-30 13:10:36

¿Cómo oculto anclar texto sin ocultar el ancla

Respuesta

Cuestiones relacionadas