Cómo quitar el borde punteado de los links en CSS

Un método simple para quitar el borde punteado en estado activo de los enlaces de tu menú o cualquier tipo de link, usando CSS.

Ejemplo

Observad en el ejemplo de arriba que esto es solamente aplicable a los enlaces de tamaño conocido. Es decir, enlaces que tienen una anchura y una altura con sus respectivos valores en píxeles, en ems, porcentage etc.

La idea básica es incluir en el contenido del enlace un elemento adicional (<em> y <span> son aceptables) y, entonces, damos a cada enlace una posición relativa y el al elemento adicional una posición absoluta.

Cuando se clica en el enlace su tamaño se reduce a CERO. Esto hace que el borde punteado no se vea porque sólo se coloca alrededor del enlace, independientemente del contenido.

Como el elemento adicional tiene una posición absoluta, todavía será visible y puedes darle el estilo que quieras en el estado activo.

XHTML
Esto es necesario para permitir que el enlace sea reducido al tamaño cero mientras que todavía muestra el texto clickable del enlace.

Código :

<ul id="navlist">
<li><a href="#nogo"><em>Opción Uno</em></a></li>
<li><a href="#nogo"><em>Opción Dos</em></a></li>
<li><a href="#nogo"><em>Opción Tres</em></a></li>
<li><a href="#nogo"><em>Opción Cuatro</em></a></li>
<li><a href="#nogo"><em>Opción Cinco</em></a></li>
</ul>

CSS
Aquí va todo el código CSS necesario para que el método funcione con sus explicaciones:

Código :

/*
Paso 1

La lista horizontal BÁSICA
*/


#navlist {
   /* Quitamos los círculos de la lista */
   list-style-type:none;
   /* Quitamos el padding */
   padding:0;
   /* Cambiamos la anchura total de los enlaces de la lista */
   width:36em;
   /* Cambiamos el ancho */
   height:5em;
   /* Centramos la lista */
   margin:0 auto; 
}
#navlist li {
   /* Cambiamos la anchura y la altura de los elementos de la lista */
   display:block;
   width:7em;
   height:2em;
   /* Usamos float: para que queden en una línea horizontal */
   float:left;
   /* Agregamos un espacio entre cada elemento de la lista */
   margin-right:0.2em;
}
#navlist li em {
   /* Quitamos el estilo acentuado del texto */
   font-style:normal;
   /* Que sea de color negro */
   color:#000;
}


/*
Paso 2

Añadimos la seudo-clase :hover
*/

#navlist a {
   /* Cambiamos la anchura y la altura del enlace */
   display:block;
   width:7em;
   height:2em;
   /* Damos a los enlaces una posición relativa
   de modo que el <em> pueda tener una posición
   absoluta dentro de cada enlace */
   position:relative;
   /* Quitamos el subrayado del texto */
   text-decoration:none;
}

/* Damos estilo a <em> */
#navlist a em {
   font-style:normal;
   color:#000;
   /* Damos al texto del <em> el mismo tamaño total que el del enlace */
   display:block;
   width:7em;
   height:1.5em;
   border-bottom:0.5em solid #000;
   /* Damos al texto del <em> una posición
   absoluta de modo que sea sacado del
   flujo normal y del control del enlace */
   position:absolute;
   top:0;
   left:0;
   /* Hacemos que el cursor del enlace aparezca
   cuando el ratón está sobre el texto del <em> */
   cursor:pointer;
}

#navlist a:hover {
   /* Agregamos un :hover para los enlaces. 
   Esto es necesario para que IE aplique el :hover al <em> */
   color:#c00;
}

#navlist a:hover em {
   /* Cambiamos el color del borde inferior de <em> en :hover */
   border-bottom:0.5em solid #c00;
}

/*
Paso 3

Quitamos el active/focus dotted border (el borde punteado de cuando está activo)
*/

#navlist a:active, #navlist a:focus {
   /* Reducimos el tamaño del enlace a cero cuando el enlace está activo.
   ¡Esto quita literalmente el borde punteado
   que SOLAMENTE se aplica al enlace a sí mismo y no
   a ninguno de los elementos que contiene
   CUANDO ESOS ELEMENTOS TIENEN UNA POSICIÓN ABSOLUTA! */
   width:0;
   height:0;
   outline:0; /* Para los navegadores que lo entienden */
}

/*
Paso 4

Damos el estado activo
*/

#navlist a:active em, #navlist a:focus em {
   /* Cambiamos el borde inferior y el texto
   del <em> a azul en estado activo que da así
   un alternativa conveniente al borde punteado */
   border-bottom:0.5em solid #00c;
   color:#00c;outline:0; /* Para los navegadores que lo entienden */
}

Este método para eliminar el borde punteado que aparece en el estado activo cuando usamos CSS está traducido del que Stu Nicholls nos ofrece en su web CCSplay.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.