Search code examples
htmlcsspseudo-class

colour is override and yet text decoration in css

I was trying pseudo code for an anchor tag in css, i.e. link, visited, hover and active. The html is:

    <a href="https://www.w3schools.com/html/" target="_blank">
        w3school
    </a>

and the css is:

    a:link {
        color: blue;
        text-decoration: overline underline;
    }

    a:visited {
        color: green;
        text-decoration: line-through;
    }

    a:hover {
        color: red;
        text-decoration: underline;
    }

    a:active {
        color: black;
        text-decoration: overline;
    }

After being visited, the text color is green which is correct. However, the text decoration is overline and underline, not line-through:visited is partially working. It seems that color is cascaded and text decoration not. Could someone explain this?

Solution

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