JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Chrome Generated Content Bug</h1>
<p>The problem: generated content cannot be clicked</p>
<a class="atheory" href="http://www.google.com">Try to click on the following URL:</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>
<br>
<a class="verification3" href="http://www.google.com">Opacity also fixes the issue (but can result in render differences)</a>

CSS

.atheory:after, .verification:after, .verification2:after, .verification3:after { content: ' [' attr(href) ']'; }

/* Background color works: transparent doesn't work though */
.verification { background-color: #FFF; }
/* An empty background image allows transparency and works */
.verification2 { background: transparent url("") no-repeat; }
/* Opacity works */
.verification3 { opacity: .9999999; }

JavaScript

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