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.
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
.
<html> <head> <title>Enlaces no subrayados</title> </head> <body> <a href="https://lineadecodigo.com">Línea de Código</a> </body> </html>
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:
<html> <head> <title>Enlaces no subrayados</title> <style>...</style> </head> <body> <a href="https://lineadecodigo.com">Línea de Código</a> </body> </html>
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 }
Si lo insertamos dentro de la página web quedará de la siguiente manera:
<html> <head> <title>Enlaces no subrayados</title> <style> a:link{ text-decoration:none } a:visited{ text-decoration:none } </style> </head> <body> <a href="https://lineadecodigo.com">Línea de Código</a> </body> </html>
Con este código ya habremos conseguido eliminar el subrayado de los enlaces mediante código CSS.