JSFiddle - React, Tailwind, and code Playground

by DelphinPRO

HTML

<div class="div1">::before:hover</div>	
<div class="div2">:hover::before</div>

CSS

div {
  padding: 1rem;
  border: 1px solid red;
  position: relative;
  width: 100px;
}

div::before {
  content: 'pseudo element';
  position: absolute;
  left: 100%;
  width: 100px;
  background: green;
}

.div1::before:hover { background: red; }
.div2:hover::before { background: red; }