Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 405
André Chalella Avatar asked Jul 02 '15 20:07

André Chalella


People also ask

How do I get rid of text decor?

By setting the text-decoration to none to remove the underline from anchor tag. Syntax: text-decoration: none; Example 1: This example sets the text-decoration property to none.

What does a visited mean in CSS?

The :visited CSS pseudo-class represents links that the user has already visited. For privacy reasons, the styles that can be modified using this selector are very limited.

What is a visited in HTML?

Definition and Usage. The :visited selector is used to select visited links. Tip: Use the :link selector to style links to unvisited pages, the :hover selector to style links when you mouse over them, and the :active selector to style links when you click on them.

What is a visited link?

Visited Links are underlined/ highlighted or have a different font color (dependent upon your site design and color scheme) AFTER a site visitor visits the page. Visited Links stay underlined/ highlighted or have a different font color as the site visitor continues to navigate the website.


1 Answers

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.

like image 61
Stanimir Dimitrov Avatar answered Nov 13 '22 09:11

Stanimir Dimitrov