JSFiddle - React, Tailwind, and code Playground

by jondlm

HTML

<div class="parent">
    <div class="child">Hover me!</div>
</div>

CSS

.parent { position: relative; }
.child:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    opacity: .15;
}
.child:hover:before { opacity: .5; }