Why is link underline appearing after clicking the link?

Question

I have an anchor tag styled with text-decoration: none.

This has removed the underline from my links, which is what I want.

However after the link is clicked, little bits of the link underline appear under the spaces between the icons in the link.

I have something like this

<a ng-click="toggle(this)" style="text-decoration: none">   <i class="fa fa-caret-down"  ng-if="!collapsed"></i>   <i class="fa fa-folder-open-o" ng-if="!collapsed"></i>   <i class="fa fa-caret-right"  ng-if="collapsed"></i>   <i class="fa fa-folder-o" ng-if="collapsed"></i> </a> 

(Using font awesome icons)

The underline is appearing just under the blank space between the icons.

Is there any way to get rid of that link underline for once and for always?!

Answer 1

That is because the default CSS values for links are declared by different browsers. A link has 4 official states.

• Normal
• Hover
• Active (On mouseclick)
• Visited
• (Focus)

In CSS you can declare the style for each of these. If you want the link not to display the text-decoration in these states:

a, a:hover, a:active, a:visited, a:focus {     text-decoration:none; } 

Answer to your comment

Yes, you can replace the a with a classname. For instance, you have a link with the class 'myLink'.

You can make the CSS:

.myLink, .myLink:hover, .myLink:active, .myLink:visited, .myLink:focus {     text-decoration:none; } 

Answer 2

The right way and you should cover this by adding the following css in your style sheet definition:

**Longer CSS Styling definition:**   a:link {     text-decoration: none; }  a:visited {     text-decoration: none; }  a:hover {     text-decoration: none; }  a:active {     text-decoration: none; }  **Shorter CSS definition:**  a, a:visited, a:hover, a:active {     text-decoration:none; } 

this will ensure no underlining in all state of links to be absolutely sure that there will not be underlining in any of the links on the page. You can also condense the styling definition in your css so the code isn't long and it's more efficient to control style for all link behaviours because it applies to all of the links on the page when you're defining a

if you want to style it for specific links you'd do the following:

a.nav:link    {text-decoration: none; } a.nav:visited {text-decoration: none; } a.nav:hover   {text-decoration: none; } a.nav:active  {text-decoration: none; }  <a href="/" class="nav">styled links</a>. 

or something completely different adding in colours, overline, font weight, size which are going to be different in each link state for that specific class.

a.external:link    {color: #0000ff; font-size: 18pt; font-weight: bold; } a.external:visited {color: #894f7b; font-weight: bold; } a.external:hover   {text-decoration: overline; background-color: #003399; } a.external:active  {color: red; }