Text-Decoration Not Working for Visited State Link

Why can't I override text-decoration for visited links?

You're limited to the attributes of the visited pseudo-class selector you can change for privacy reasons, so you can only style the following:

color
background-color
border-color
border-bottom-color
border-left-color
border-right-color
border-top-color
column-rule-color
outline-color

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

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.

visited links won't underline

Hat tip to @pwdst for spotting this.

See this documentation for Firefox. Similar rules apply to Chrome.

Since JavaScript can read the styles applied to an element (as well as other elements, and the computed styles of the same), allowing changes to a link when it is :visited can reveal information about what others sites a person has visited.

In order to protect users' privacy, browsers limit which properties can be changed by :visited and text-decoration can not be altered.

See also: The Selectors specification which blesses this behaviour:

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.

:visited text-decoration not working as desired

You can use 'outline: none' at a tag like below;

.page-scroll:active, .page-scroll:focus{
    outline:none !important;
}

if above doesn't work. you can use like below;

.btn{outline:none !important;}

But if you do like this, web accessibility is lost. The a tag can't be focused with a tab key. So I hope that the outline can be stayed there.

The reason why I used !important. I think your CSS is overrided from another CSS. Please check the element with Chrome developer tools.

colour is override and yet text decoration in css

Browsers these days limit what styles you can apply for the :visited state - because otherwise, checking for certain changes in layout via JavaScript allows to determine whether you visited an external URL already.

https://developer.mozilla.org/en-US/docs/Web/CSS/:visited#Styling_restrictions:

Styling restrictions
For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:

Allowable CSS properties are color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color.

https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector:

Before about 2010, the CSS :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. This was done through window.getComputedStyle and other techniques. This process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity.

Removing the underline from under a visited link

You can't change text-decoration in :visited

Rather set text-decoration:none on anchors and text-decoration:underline on links you want underlined. For example you can use a class to achieve this.

a
{
   text-decoration:none;
}

a.underlined
{
   text-decoration:underline;
}