JSFiddle - React, Tailwind, and code Playground

HTML

<div class="link">
  <span>
     test
  </span>
</div>

SCSS

.link {
  span {
    &:after {
      content: " ";
      background-color: green;
      width: 40px;
      height: 40px;
      position: absolute;
      left:30px;
      top: 30px;
    }
  }
  &.active,
  &:hover {
    span:after {
      background-color: red;
    }
  }
}