CODEWITHSUNDEEP
htmlcss
Victor Grazi
Victor Grazi

Reputation: 16490

Why is link underline appearing after clicking the link?

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?!

Upvotes: 40

Views: 51811

Answers (4)

Mark
Mark

Reputation: 3272

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;
}

Upvotes: 78

unixmiah
unixmiah

Reputation: 3145

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; }

Upvotes: 10

Alexis Peters
Alexis Peters

Reputation: 1631

<style>
   a{text-decoration:none}
   a:visited{text-decoration:none}
</style>

Add a stylesheet to your project

Upvotes: 3

LcSalazar
LcSalazar

Reputation: 16841

You're using the wrong property... text-decoration-line is not meant for this.

The text-decoration-line property specifies what type of line, if any, the decoration will have


Use text-decoration: none instead

Upvotes: 6

Related Questions