CODEWITHSUNDEEP
csscss-selectors
André Chalella
André Chalella

Reputation: 14121

Browsers don't honor a:visited { text-decoration: none; }

I can't remove underlining from visited links. In my computer, the Fiddle below shows black, underlined text for the visited link in any browser (current versions of Chrome, Firefox and IE).

a:link       { color: red;   text-decoration: underline; }
a:visited    { color: black; text-decoration: none;      }
<p><a href="http://www.nevervisited.com">This link is not visited.</a></p>
<p><a href="http://www.google.com">This is link is visited.</a></p>

This is Chrome's inspector for the visited link.

I suspect a:visited being grayed out has something to do with this, but this question about grayed out styles didn't do anything for me, though it helped many others.

These answers (this, this) suggest the spec doesn't care about child elements' text-decoration when their ancestor has it defined, but I don't think this is the case here. My <a>s don't have underlined parents, nor am I using pseudo-elements, but pseudo-classes.

Also, why does Chrome apply a:link to the visited link, if W3C says that

The two states [a:link and a:visited] are mutually exclusive.

Maybe this has to do with user agents hiding private info from websites, like W3C suggests right after the previous quote? This:

Note. It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.

UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.

Upvotes: 8

Views: 5249

Answers (2)

Spartacus Rocha
Spartacus Rocha

Reputation: 606

You still can get the same effect by setting

text-decoration-color

Simply, set decoration color to your background color. Line will still be there, but wont be visible.

For example in a white background page, use:

text-decoration-color: white;

Upvotes: 1

Stanimir Dimitrov
Stanimir Dimitrov

Reputation: 1890

The only CSS property you can apply on a:visited links in most Webkit-based browsers (like Safari) or Blink-based (Chrome and Opera) is color. Anything else won't work. It has something to do with browser history stealing. You can read more about it from here:

http://seclists.org/fulldisclosure/2013/May/13

However you can change the style of all links with a {text-decoration: none;}.

The selector itself is not dangerous, but if you combine it with Javascript's functions like getComputedStyle() things can get pretty ugly and by ugly I mean that other users can view and read your personal browser history.

Mozilla (Gecko engine) limited the selector properties to color, background-color, border-*-color.

Upvotes: 10

Related Questions