The enlaces by definition do not have an as-is representation. It is true that by convention it seems that the underlining has been done with those merits. Although, since the arrival of style sheets CSS, the display of the links becomes very varied: showing background color, eliminating the underline, changing the icon when passing over them,… In this case we are going to see how to create links with underlines above and below.
In this case we are not going to define a class that can be used. But we are going to directly redefine the behavior of the links HTML. That is, we are going to redefine the behavior of the element
a
.
To do this, simply define a style sheet with the element
a
.Let’s see how it would look:
a {
/*Definition of A*/
}
This element style definition
a
we will place it inside the element
style
from our website.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document Title</title>
<style>
to {
/*Definition of A*/
}
</style>
</head>
<body>
<!-- HTML5 document -->
</body>
</html>
Specifically, we are going to redefine the behavior when we hover the pointer over the link. That is, the selector
hover
. The code would look like this:
a:hover {
/*Definition of A*/
}
The CSS that modify the lower and upper underline is the
text-decoration
. And the values we can play with are overline, if we want an underline above the text and underline if we want the underline below the text. In our case we are going to use both.
The code to have links underlined above and below would look like this:
a:hover {
text-decoration: overline underline;
}
Now we only have to put links on the page where we have defined this style sheet so we can have underlined links above and below.