Eliminar el subrayado de los enlaces

Por defecto los navegadores suelen mostrar los enlaces de una página HTML de forma subrayada. Dependiendo del estilo que le estemos dando a la página, esto, puede ser más o menos un inconveniente.

Mediante CSS tenemos una forma muy sencilla de hacer que los enlaces no aparezcan subrayados, es decir, vamos a eliminar el subrayado de los enlaces.

Manipular el elemento anchor

Para ello simplemente tenemos que manipular las propiedades del elemento anchor, es decir, del elemento A. Dicho elemento es el que representa los enlaces en el lenguaje HTML.

Lo primero que tenemos que hacer es crear un enlace en nuetra página web mediante el elemento A.

<a href="[http://www.manualweb.net">Manual](http://www.manualweb.net/%22%3EManual) Web</a>

Crear el código CSS

Lo siguiente que haremos para eliminar el subrayado de los enlaces es crear un código CSS para acceder a dicho elemento. Para ello, dentro de la cabecera de la página crearemos una sección para manejar estilo. Esto lo hacemos mediante el elemento style.

Veamos el código:

<style type="text/css">
</style>

Modificar la propiedad text-decoration

Dentro de esta sección manipularemos las comportamientos del elemento A. En concreto vamos a manipular los comportamientos link y visited. El primero representa al enlace en su estado inicial y el segundo al enlace cuando ha sido visitado.

La idea es que en ambos casos no aparezca el subrayado. Para ello hay que modificar la propiedad text-decoration e indicar que no tiene ninguna. Es decir, asignarle el valor de none.

El código CSS para eliminar el subrayado de los enlaces quedaría de la siguiente manera:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}

Código completo

Si lo insertamos dentro de la página web quedará de la siguiente manera:

<html>
<head>
<style type="text/css">
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
</style>
</head>
<body>
<a href="[http://www.manualweb.net">Manual](http://www.manualweb.net/%22%3EManual) Web</a>
</body>
</html>

Con este código ya habremos conseguido eliminar el subrayado de los enlaces mediante código CSS.

Víctor Cuervo

Programador, Arquitecto IT, álter ego de Línea de Código, amante de las tecnologías, generador de conocimiento y facilitador del aprendizaje.

Descarga el código de Eliminar el subrayado de los enlaces

Código en CSS que nos sirve para poder eliminar el subrayado de los enlaces manipulando la propiedad text-decoration.

Descargar código