JSFiddle - React, Tailwind, and code Playground

HTML

<span class="parent">
    <span class="child" data-text=" to see me">hover me</span>
</span>
<br>
<br>
<a href="#" class="parent">
    <span class="child" data-text=" to see me">hover me</span>
</a>
<br>
<br>
<button class="parent">
    <span class="child" data-text=" to see me">hover me</span>
</button>

CSS

.parent {
    display: inline-block;
    background: green;
}

.child:after {
    content: attr(data-text);
    opacity: 0;
}

.child:hover:after {
    opacity: 1;
}