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
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).
Para corregirlo solo hay que añadir una regla más al CSS: overflow:hidden;
Con esto la línea se ajusta de nuevo al elemento porque ya no “busca” al texto fuera del área visible.
3 comentarios
Comments are closed.
Se supone que con outline:none; es suficiente no? :S
@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.