JSFiddle - React, Tailwind, and code Playground

HTML

<a class="standard_class" href="http://www.google.com">A Google Link</a>
<br>
<a class="padded_test" href="http://www.google.com">A Google Link</a>
<br>
<a class="atheory" href="http://www.google.com">Generated content cannot be clicked</a>
<br>
<a class="verification" href="http://www.google.com">Background color fixes issue (cannot use transparent though)</a>
<br>
<a class="verification2" href="http://www.google.com">Background also fixes issue (allows transparency)</a>

CSS

.padded_test {
    padding-right: 2em;
}
.standard_class:after,
.padded_test:after {
    background-color: #900;
    color: #fff;
    content: ' (' attr(href) ')';
}
.standard_class,
.padded_test {
    background-color: #CCC;
}
.atheory:after { content: ' [' attr(href) ']'; }
.verification:after, .verification2:after { content: ' [' attr(href) ']'; }
/* With this commented out, the fourth link cannot be clicked (in Chrome only */
.verification { background-color: #FFF; }
/* transparent doesn't work either */
.verification2 { background: transparent url("") no-repeat; }

JavaScript

$(function(){
    $("a").click(function(e){ 
        e.preventDefault();
        alert("Clicked");
    });
});