JSFiddle - React, Tailwind, and code Playground

by exizt

HTML

<a href="http://google.com"><span>«</span><span class="underlined-container"><span class="underlined">visited</span></span><span>»</span></a>
<a href="http://fooooo.com"><span>«</span><span class="underlined-container"><span class="underlined">unvisited</span></span><span>»</span></a>

CSS

a {
    text-decoration:none;
    border-bottom-width: 0px;
    border-bottom-style: solid;
}


a:visited span:not(.underlined-container) {
    /*controls visited color*/
    color: purple;
}

a:visited {
    /*controls visited underline color*/
    color: pink;
}

a span:not(.underlined-container) {
    /*controls unvisited color*/
    color: blue;
} 

a {
    /*controls unvisited underline color*/
    color: lightblue;
}

a:visited:hover span:not(.underlined-container) {
    /*controls hover on visited*/
    color: green;
    border-bottom-color: lightgreen
}

a:hover span:nth-child(n) {
    /*controls hover on unvisited */
    color: gray;
    border-bottom-color: lightgray;
}

.underlined-container {
    border-bottom-width: 1px;
    border-bottom-style: inherit;
}