Los enlaces por definición no tienen una representación tal cual. Si es verdad que por convención parece que el subrayado se ha hecho con esos méritos. Si bien, a partir de la llegada de las hojas de estilo CSS, la visualización de los enlaces pasa a ser muy variopinta: mostrando color de fondo, eliminado el subrayado, cambiando el icono al pasar sobre ellos,… En este caso vamos a ver cómo crear enlaces subrayados arriba y abajo.
En este caso no vamos a definir una clase que pueda ser utilizada. Sino que directamente vamos a redefinir el comportamiento de los enlaces HTML. Es decir, vamos a redefinir el comportamiento del elemento a.
Para ello simplemente bastará con definir una hoja de estilo con el elemento a.Veamos como quedaría:
a {
/*Definición de A*/
}
Esta definición de estilo del elemento a la colocaremos dentro del elemento style de nuestra página web.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titulo Documento</title>
<style>
a {
/*Definición de A*/
}
</style>
</head>
<body>
<!-- Documento HTML5 -->
</body>
</html>
En concreto vamos a redefinir el comportamiento de cuando pasemos el puntero por encima del enlace. Es decir, el selector hover. El código quedaría de la siguiente forma:
a:hover {
/*Definición de A*/
}
El atributo CSS que modifican el subrayado inferior y superior es el text-decoration. Y los valores con los que podemos jugar son overline, si queremos un subrayado por encima del texto y underline si queremos el subrayado por debajo del texto. En nuestro caso vamos a utilizar ambos.
El código para tener enlaces subrayados arriba y abajo quedaría de la siguiente forma:
a:hover {
text-decoration: overline underline;
}
Ahora solo nos queda poner enlaces en la página donde tengamos definida esta hoja de estilo para poder tener enlaces subrayados arriba y abajo.
