2

(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;
}
3
  • 1
    Could it be that you set border-bottom instead of text-decoration for links?
    – BoltClock
    Feb 5, 2011 at 22:01
  • 1
    Can you show us your site with an example? I'd have expected the example in your question to work in Chrome...
    – Kris C
    Feb 5, 2011 at 22:02
  • 1
    @Kris C phihag.de/2011/so/visited.html
    – phihag
    Feb 5, 2011 at 22:18

3 Answers 3

7

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.

2
  • Why do you need !important? I don´t see any underlines in Chrome on sites where I have just used a { text-decoration: none; }
    – jeroen
    Feb 5, 2011 at 22:41
  • @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.
    – phihag
    Feb 5, 2011 at 22:44
4

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:

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

1
  • 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.
    – Julik
    Nov 2, 2013 at 19:57

Not the answer you're looking for? Browse other questions tagged or ask your own question.