CSS: Corregir la línea punteada fuera de lugar en los enlaces

Este será un tip rápido para corregir la línea punteada fuera de lugar en los enlaces y botones. El error lo he visto en Firefox aunque desconozco si también aparece en otros navegadores

linea-erronea

La línea que se ve arriba, llamada outline, no debería ser tan extensa. Este error ocurre cuando a través de CSS queremos ocultar el texto de un elemento enviándolo lejos del área visible con text-indent. En el código de abajo se puede ver el text-indent a –9999em (lo enviaron muy lejos jeje).

css-problema

Para corregirlo solo hay que añadir una regla más al CSS: overflow:hidden;

css-solucion

Con esto la línea se ajusta de nuevo al elemento porque ya no “busca” al texto fuera del área visible.

linea-correcta

3 comentarios

  • @elias: Lo he intentado con a:active{outline:none;} y con a:focus{outline:none;} pero ninguna de las dos formas me ha funcionado.

    Personalmente no me importa que se vea, solo me molesta que se vea fuera de lugar.

  • el outline te sirve cuando navegas con el teclado y te marca que enlace es el que estás “seleccionando”, por eso no habría que usar outline:none (si es que funciona).

    Personalmente yo prefiero no usar text-ident para nada, porque webkit aveces pela cables :S Regularmente agrego un <span> con el que oculto el texto. De todas formas, overflow:hidden es una buena “practica”, gracias por el tip.

Comments are closed.

A %d blogueros les gusta esto: