How to disable text decoration with CSS?

Question

So, I need to remove a visited link coloring from my navigation bar, as it will look ugly.

I have tried to use text-decoration: none; and color: white; but that does not seem to help it.

CSS for navigation

Actual code

I removed the actual links from the code, in the real version there is link but for this question links are replaced with #

Answer 1

In addition to Bariock's answer, this will help reset your <a> links in all circumstances to your specified css.

a:visited, a:hover, a:active, a:focus {
   color: yourColor !important;
   text-decoration: none !important;
   outline: none !important;
}

The !important signifies that it has a higher precedence than that of other rules declaring the same values for the same selectors. Note: you can still style them separately such like you would with :hover.

Answer 2

a:visited{
    color: your-color;
}

Answer 3

I edited the <a> tag to go around the <button> so the text is back to white now and the button actually works. It is no longer just "click text to visit link" the whole button works.

<a href="#"><button class="dropbtn">Community</button></a>

Answer 4

Try adding a !important to the end of the css styles like so:

a {
   color: white !important;
}

Hope this helps!

Answer 5

I recommend you first set the style of the link tag, for example:

.dropdown a{ color:#fff }

now your text links inside the container with the class .dropdown will be as white color. Then you don't need to set a visited link color, unless you want to set it.

If you want to get rid the underline in the link, your style will be like this:

.dropdown a{ color:#fff; text-decoration: none; }