JSFiddle - React, Tailwind, and code Playground

HTML

<a href="www.google.com"></a>

CSS

a {
  display: block;
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
a:before {
  position: absolute;
  top:0;
  left:0;
  color:white;
  content:"★";
  background: green;
}

a:hover {
 opacity: 0.5;   
}

a:hover:before {
  opacity: 1;
}

a:hover::before{
 opacity: 1;   
}