Removing the underline from under a visited link

Question

What is the CSS code that I need to write in order to remove the underline from these link after visiting them?

<ul id = "header">
    <li><a href="sigur ros.html"> Home </a> </li>
    <li>Images</li>
    <li>Videos</li>
</ul>

I tried this:

a:visited { text-decoration: none; }

but it didn't work.

Here is a fiddle showing the problem: http://jsfiddle.net/litari/X2Yjk/1/

I assume that if the URL is invalid, the page probably won't be remembered as visited by the browser — ex0ns, Jul 24 '14 at 13:45
yes, the non visited ones are still blue. and the visited one is purple. — joe11093, Jul 24 '14 at 13:46
What you tried is in fact the correct way to do it, so there's probably another issue. As @ex0ns suggested, your URL might be invalid (since there's a space in the name). — TylerH, Jul 24 '14 at 13:46
I changed the url and removed the spaces, the issue is still there. — joe11093, Jul 24 '14 at 13:48
I think he said everything: [1]: http://stackoverflow.com/a/4910041/1062711 — ex0ns, Jul 24 '14 at 14:01

score 12 · Accepted Answer · answered Jul 24 '14 at 13:46

12

You can't change text-decoration in :visited

Rather set text-decoration:none on anchors and text-decoration:underline on links you want underlined. For example you can use a class to achieve this.

a
{
   text-decoration:none;
}

a.underlined
{
   text-decoration:underline;
}

answered Jul 24 '14 at 13:46

dk_french032

638
1
7
22

While this appears to be the case (you can't change it), can you link a source? – TylerH Jul 24 '14 at 13:49
1

http://stackoverflow.com/questions/10471929/underlining-visited-links – dk_french032 Jul 24 '14 at 13:51
in this case, shouldnt i apply the .underline class only to the visited links? – joe11093 Jul 24 '14 at 13:53
No. If you set text-decoration:none to all links none of them will be underline unless specified with a class. – dk_french032 Jul 24 '14 at 13:54
oh okay. i understood it the other way around for some reason. – joe11093 Jul 24 '14 at 13:57

score 2 · Answer 2 · answered Jul 24 '14 at 13:44

2

I think you should define the default state as well, so for example:

a:link { text-decoration: underline; }
a:visited { text-decoration: none; }

answered Jul 24 '14 at 13:44

Alex Szabo

3,274
2
18
30

I tried this too, but it also didn't work. – joe11093 Jul 24 '14 at 13:45
@joe11093 Just a question, did you try to add it in a style tag, like this? -- this should be posted in the head section of the html page. – Alex Szabo Jul 24 '14 at 13:46
yes. all the css i wrote for this one is written in the head of the html page. – joe11093 Jul 24 '14 at 13:50

score 0 · Answer 3 · answered Jul 24 '14 at 13:45

0

If existing code is not working for you then please add "!important" in your property.

a:visited
{ 
     text-decoration: none !important;
}

answered Jul 24 '14 at 13:45

Jayesh Goyani

11,008
11
30
50

score 0 · Answer 4 · answered Jul 24 '14 at 13:46

0

Or try

outline: 0;

It might work on FF.

answered Jul 24 '14 at 13:46

ChoiBedal

111
7

this one didnt work either. – joe11093 Jul 24 '14 at 13:55

score 0 · Answer 5 · answered Jul 24 '14 at 14:01

As mentioned before, changing text-decoration for :visited anchors does not work. But you could do the following:

a {
    border-bottom:1px solid #000;
    text-decoration:none;
}

a:visited { 
    border-bottom-color:rgba(255,255,255,0);
}

This works fine for me: http://jsfiddle.net/Whre/N8c3A/ To test it using chrome inspect the anchor with the developer tools, rightclick the markup and say "Force element state" -> ":visited".

Removing the underline from under a visited link

5 Answers5