How can I remove the underline of a link in chrome using CSS? [duplicate]

Question

This question already has an answer here:

• Underlining visited links 2 answers

(it works in FF) How can I, using CSS, remove the underline of a visited link? I have tried:

a:visited {
    color: rgb(255, 255, 255);
    text-decoration: none !important;
}

and

a:visited {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

Answer 1

The only CSS property you can apply on :visited links in most webkit-based browsers (like Chrome) is color. This is to prevent history stealing. Also, you can't determine the value of the color CSS property of links from JavaScript. See https://bugs.webkit.org/show_bug.cgi?id=24300 for details.

You can, however, change the style of all links with a{text-decoration: none;}. Here's a demo of the whole affair.

Answer 2

Some browser-vendors have decided/realised that separately styling a:visited hyperlinks represent a security/privacy threat to the user. Therefore some, though not all, have removed the ability to style a:visited differently.

I suspect that this is true of Chrome.

References:

• http://djtechnocrat.blogspot.com/2010/12/browser-privacy-css-history-sniffing-in.html
• http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/
• See also this Stackoverflow question: Google chrome a:visited background image not working

Answer 3

Your a:visited {} definition must come before your general a {} definition. You can use a:visited to set a color, but setting a text-decoration doesnt' work - but if you later set a general text-decoration for a elements, it does.

So:

a:visited {color: yellow;}
a {color:yellow; text-decoration: none; }

works (gives all links in yellow, no text decoration ever), but

a {color:yellow; text-decoration: none; }
a:visited {color: yellow;}

and

a {color:yellow; text-decoration: none; }
a:visited {color: yellow; text-decoration: none;}

don't (both give all links in yellow, but underlined)