How can I remove the blue underline from a link using CSS?

General Discussions
,
1

I want my link to appear in white color without the default blue underline. Although the text color changes correctly to white, the blue underline still shows up.

I tried using text-decoration: none; and even text-decoration: none !important; in my CSS to remove the underline, but it didn’t work.

How do I effectively remove underline from link CSS in this case?

2

I faced the same issue when trying to remove the blue underline from my links. Usually, text-decoration: none; works, but sometimes browser defaults or other CSS rules override it.

To fix this, make sure your CSS selector is specific enough and try this:

a {  
  color: white;  
  text-decoration: none !important;  
}

Also, check if there are any other styles (like border-bottom) causing the underline effect. Using browser dev tools to inspect the link helps identify conflicting styles.

3

If text-decoration: none isn’t removing the blue underline, it might be because some browsers apply additional styles like border-bottom or the link is visited/focused/active, which can keep showing an underline. I usually do:

a, a:visited, a:hover, a:focus, a:active {  
  color: white;  
  text-decoration: none !important;  
  border-bottom: none;  
}

This covers all states and removes any border underlines that could mimic the default o

4

When I had trouble removing the blue underline, I realized that sometimes the underline is added by the browser’s default focus styles or custom user agent stylesheet.

Besides text-decoration: none !important;, you might want to reset any other underline effects, for example:

a {  
  color: white;  
  text-decoration: none !important;  
  outline: none;  
}

Plus, check for any parent elements applying styles that might interfere. Inspecting the element in your browser helps pinpoint the culprit.