Removing Underline from Link in CSS
If we work as web developers, we may have wished to eliminate the underlining that automatically displays when we add a link to a page.
Fortunately, we can design the anchor tags responsible for displaying a link, just like other components on a web page.
In this post, we'll demonstrate how to use CSS to remove the underlining from a link. We'll also demonstrate how to remove the underline for each of the four states where links may exist. Links in browsers, by default, have an underline.
If we've already been to the page the link leads to, it additionally adds the colors blue and purple.
Using CSS, you may link underlining disappear by adding text-decoration: none to your code.
Remove the Underline from the Link CSS
The textual connections are colored and highlighted to draw the eye, just as most paintings are framed to improve their look and for aesthetic reasons. The HTML/CSS standards specify that clicked hyperlinks should always be underlined. This enhances the web pages' clickability and interaction and serves various functions. Examples of this service include E-commerce websites, search engine display sites, communication channels, encyclopedias, news portals, video libraries, index pages, and other online services.
Additionally, suppose you are a front-end web designer who dislikes the appearance of your unique website due to ununiform text or are simply trying to eliminate the irregularities brought on by underlined hyperlinks. In that case, this article will precisely illuminate the solutions for you.
What Links Do in CSS?
An object that connects online pages or a portion inside a single web page is known as a link or hyperlink. The "href" property of a hyperlink in HTML is used to specify its destination site. Additionally, the HTML standard has specified the textual hyperlink to remain highlighted regardless of the status of the link. In this case, links can only be in one of the four possible states (visited, hovering, unvisited, or active link state) at once in any known browser. However, several CSS style methods may overcome this standard restriction.
As a result, CSS properties are used to style hyperlinks. Furthermore, creating pseudo-classes may stylize the various states of a link. The following parts will explain element selection and pseudo-classes.
How do I choose the link CSS element?
We have two options: execute a general element selection or specify unique style characteristics for each class. The four states of a connection are depicted in the table below:
Additionally, the most helpful CSS attributes for modifying links are listed below with the following sample values:
- Color: Crimson;
- Font-family: Calibri;
- Text-decoration: none;
- Background-color: Cyan;
How can I Use CSS to Remove the Underline from the Anchors Tag?
The anchor element defines hyperlinks; by default, it shows the underlined anchor portion. Utilizing the text-decoration attribute makes removing the underline simple. The CSS text-decoration property enables text to be decorated as needed. To remove the underline from the anchor element, set text-decoration to none.
Syntax:
text-decoration: none;
Example 1: The text-decoration property is set to none in this example.
<!DOCTYPE html>
<html>
<head>
<title>
Example of text-decoration property
</title>
<!-- text-decoration property to remove
underline from anchor tag -->
<style>
#main {
text-decoration: none;
}
</style>
</head>
<body style = "text-align:left;">
<h1 style = "color:red;" >
Welcome
</h1>
<h3>First Link</h3>
<a href = "#">Link 1</a>
<br>
<h3>Removed Underline</h3>
<a id = "main" href = "#">Link 2</a>
</body>
</html>
Output
Example 2: When the mouse is above the anchor portion, utilize the hover property to remove the underlining.
<!-- HTML code to remove underline
from anchor tag -->
<!DOCTYPE html>
<html>
<head>
<title>
Example of text-decoration property
</title>
<!-- text-decoration property to remove
underline from anchor tag -->
<style>
a:link {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
</style>
</head>
<body style = "text-align:left;">
<h1 style = "color:red;" >
Welcome
</h1>
<a id = "main" href = "#">Welcome Anchor Part</a>
</body>
</html>
Output:
Before the mouse moves over:
After the mouse moves over:
Conclusion
In conclusion, customizing links to display correctly is highly wanted to avoid confusion for anyone attempting to reach our websites. The user experience is ruined by poorly designed web links, which may be remedied by modifying the default settings. We used the text-decoration CSS property by choosing the <a> tag and changing its value to none.