ADVERTISEMENT
ADVERTISEMENT

How to remove the underline for anchors (links)?

By using the CSS, remove the underline for anchors (links).
Submitted by Apurva Mathur, on June 19, 2022

You may have observed on several websites that all the links are always underlined in that annoying blue color, what if we don't want that blue underline below our links, or what if we want to change the color of that underline then what should we do in cases like these?

The easiest way to solve this problem is the use of text-decoration property.

So what does this property do?

CSS text-decoration Property: This is the property that is used when we want to add some decoration to our text.

Let's see how we can remove the underline?

<!DOCTYPE html>
<html>
   <head>
      <title>
         Remove underline
      </title>
      <style>
         #link2 {
         text-decoration: none;
         }
         #link3 {
         text-decoration-color: deeppink;
         }
      </style>
   </head>
   <body style = "text-align:center;">
      <p style = "color:purple;font-size: 30px;font-weight: bolder;font-family: Bahnschrift" >
         Hello eveyone
      </p>
      <h2>Link with blue underline</h2>
      <a href = "#">Hello 1</a>
      <br>
      <h2>Link with no underline</h2>
      <a id = "link2" href = "#">Hello 2</a>
      <br>
      <h2>Link with colored underline</h2>
      <a id = "link3" href = "#">Hello 3</a>
   </body>
</html>

Output:

Example: Remove the underline

Explanation:

In the above example, I've taken three links that will give a better understanding of this topic.

Starting with the first link, this is the default link that we usually see on WebPages.

For the second link, here I've used the ID selector to give styling to the respective link. Setting text-decoration="none" will format the decoration to none.

In the third link, here also ID selector is used to add styling. You can give any color to style the text by using text-decoration-color.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.