Disable color change of anchor tag when visited

Role of pseudo-classes sequence

Anchor pseudo-classes sequence plays a key role in CSS styling. Remember the acronym—LoVe/HAte (link, visited, hover, active). The correct sequence is:

a:link {} // For standard link love
a:visited {} // Visited link, seen and loved
a:hover {} // The attraction is mutual
a:active {} // We are getting serious now!


To completely remove the visited color, you can simply skip defining a color for the :visited pseudo-class:

a:link, a:hover, a:active {
    color: black; // Let's stick with classic black
}


Keeping it consistent

A consistent user experience can be achieved by using the inherit value. This ensures the anchor retains the color of its parent element:

a, a:visited, a:hover, a:active {
    color: inherit; // Like father, like son
}


The browser-default approach

A universal method without defining a manual color for visited links involves employing system color values:

a:visited { color: LinkText; } // Default yet classy


Note: System color values like LinkText might not be supported across all browsers. They should be used wisely, keeping in mind the potential compatibility issues.

Sass and @extend

While using Sass, @extend can avoid repetitions. However, be cautious as it might inflate the CSS file size.

a:visited { 
    @extend .regular-link; // Practicing DRY code, stay hydrated ;)
}


Use @extend sparingly to retain the balance between maintainability and performance.