By default, browsers usually show links to a page HTML in an underlined way. Depending on the style we are giving to the page, this can be more or less an inconvenience. Using CSS we have a very simple way to make links not appear underlined, that is, we are going to remove the underline from the links.
To do this we simply have to manipulate the properties of the anchor element, that is, of the element A
. This element is the one that represents the links in the language HTML.
The first thing we have to do is create a link on our web page using the element A
.
<html> <head> <title>Links not underlined</title> </head> <body> <a href="https://lineadecodigo.com">Line of Code</a> </body> </html>
The next thing we will do to remove the underline from the links is to create a code CSS to access said element. To do this, within the header of the page we will create a section to manage style. We do this using the element.
style
. Let’s look at the code:
<html> <head> <title>Links not underlined</title> <style>...</style> </head> <body> <a href="https://lineadecodigo.com">Line of Code</a> </body> </html>
Within this section we will manipulate the behaviors of the element A
. Specifically, we are going to manipulate the behaviors
link
and
visited
. The first represents the link in its initial state and the second represents the link when it has been visited.
The idea is that in both cases the underline does not appear. To do this, you must modify the property
text-decoration
and indicate that it does not have any. That is, assign it the value of none.
The CSS code to eliminate the underlining of the links would look like this:
a:link{
text-decoration:none
}
a:visited{
text-decoration:none
}
If we insert it into the web page it will look like this:
<html>
<head>
<title>Links not underlined</title>
<style>
a:link{
text-decoration:none
}
a:visited{
text-decoration:none
}
</style>
</head>
<body>
<a href="https://lineadecodigo.com">Line of Code</a>
</body>
</html>
With this code we will have already managed to eliminate the underlining of the links using CSS code.