JSFiddle - React, Tailwind, and code Playground

HTML

<div class="">Google <a href="http://google.com" class="">green<span class="nv">jjm</span><span>foo </span><span class="bar">bar</span></a></div>
<br>
wwwsaa <a href="http://wwwssssaaaa.com"><span>foo </span><span class="bar"><span>bar</span></span></a>

CSS

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

a:visited {
    color: yellow;
}

a:visited span:not(.bar) {
    /*color: red;*/
}



.bar {
    border-bottom-width: 1px;
    border-bottom-style: inherit;
    color: gray;
}

.nv:visited, a.nv:visited span, .nv a:visited, a:visited span.nv {
    color: inherit;
}