How to Remove Underline from Link in CSS
In this detailed tutorial, I will share how to remove underline from link using CSS. The major benefit of removing underlines is it makes the text easier to read, as it eliminates visual clutter and allows users to focus on the content
In web design, the look and feel of a website is much important for attracting people. Removing underlines from hyperlinks is a modest but effective thing that results in a more modern look of a website.
Before starting, if you don’t know anything about HTML links then first you should check out this tutorial about the Links in HTML (Complete Guide).
Now, let’s begin.
How to Remove Underline from Link in CSS
The most simplest and easy method to remove underline from a link is by using CSS text-decoration property. Let’s see the code syntax to do that.
In the following, I used HTML <a> tag to define a link in my webpage and named the link “Facebook Page Link”.
<a href="https://www.facebook.com/webcodzing/">Facebook Page Link</a>
The output of this HTML will look like this below in the browser:
Now, in the following CSS code, I used the CSS element selector to select the HTML anchor <a> element and applied text-decoration property and set that to none.
a{ text-decoration: none; }
The above CSS code simply removed the underline from the link as you can see in the following output:
Note: It’s the only method to remove underlining from links in CSS. However, we can also use JavaScript but that would be in a different scenario.
Furthermore, CSS text-decoration property have the following 4 built-in values that you use for styling links.
text-decoration: none | underline | line-through | overline;
We used an element selector together with the text-decoration property and it will remove the underline of links from the entire website. Because we used just one CSS global rule.
Now, what if you want to remove the underline from a specific link present on your webpage? Let’s see what to do in that situation.
Remove Underline from a Specific Link
To remove the underline from specific links, you can simply define a class for that link. In the following, I slightly modified the HTML code and added a class="mylink".
<a href="https://www.facebook.com/webcodzing/" class="mylink">Facebook Page Link</a>
Now, I will select this link by its class name using the CSS class selector as shown below. And will apply text-decoration property to that. It will remove the underline from only this specific link and the rest of the links will remain the same.
.mylink{ text-decoration: none; }
Moreover, you can apply different underline styling on different links based on the above code.
What if you want to remove the underline from the link only when the user hovers over it? Let’s see how to do that.
Remove Underline from Link on Hover
You can improve user interaction with minor hover effects. For example, you can remove the underline when the user hovers over the link as shown below. This will create a nice and simple effect.
For this, I will use the CSS :hover pseudo-class. Below is the CSS syntax to do that.
a:hover { text-decoration: underline; }
Remember, for specific link styling I will define the class in HTML same as we saw previously. And then I will use the CSS like this below.
.class-name:hover { text-decoration: underline; }
This above CSS will remove underline from a particular link with the defined class in HTML.
Additionally, you can add the transition effect to make it smooth by modifying the code as shown below.
a:hover { text-decoration: underline; /* Additional transition properties for smooth animation */ transition: text-decoration 0.3s ease; }
This rule restores the underlining when hovered, resulting in a dynamic and responsive user experience. The transition attribute confirms a seamless transition, that will make it slightly beautiful. However, it’s up to you if you want to use CSS transition.
What if I want to remove the underline from links on the desktop version of the website and the mobile version remains the same? Let’s see how to do that.
Responsively Removing Underline of Links
We can use CSS @media queries to responsively remove the underline of links based on different devices and screen sizes. For that, I will use the following media query code.
a{ text-decoration: none; } /* media query */ @media screen and (max-width: 480px) { a{ text-decoration: underline; } }
Now, this code will remove the underline of links only from the desktop version of website. While the mobile version of the website will still show the underline. You can see the output of this code by switching to different screen sizes.
Best Practices & Tips
- It’s a better practice to use CSS rules in your separate stylesheet file.
- Consider the order of the rules to ensure correct cascading and specificity.
- To embed the code in HTML, use the
<style>tag in HTML. - Test your link styles across different browsers to ensure consistent rendering.
Conclusion
In this tutorial, we saw how to remove the underline from link using CSS. It’s a modest but important thing to learn for manipulating links in different ways. We also saw different styling things and best practices. Now, you are able to remove underline from all links or only from specific ones, depending on what you want.
Also read how to create an HTML button with a link.
And, don’t forget to help others by sharing this tutorial!
Topic: CSS
