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 l

Answer 1

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

Add a stylesheet to your project

Answer 2

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 3

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

Answer 4

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