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

Question

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

Solution 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.

Solution 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

Solution 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)

Comments

[jeroen]

Why do you need !important? I don´t see any underlines in Chrome on sites where I have just used a { text-decoration: none; }

[phihag]

@jeroen In general, you don't need important if your rule's specificity is greater than that of the text-decoration rule in the built-in default stylesheet. For the color property, many browsers used to declare it in the more specific a:link or a:visited element. Since I can't find any browser needing !important for text-decoration, I removed it from the answer.

[jeroen]

Ah, didn´t know that, thanks!

[Barry]

This one is golden. Also note that your styling of that kind cannot be reapllied using JavaScript, at least in Chrome. If you try to reload this kind of a stylesheet you will get them restyled back.