JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<a href="">
  india
</a>

SCSS

a{
  background: red;
  width: 400px;
  height: 400px;
  display: block;
  text-align: center;
  color:#fff;
   &:before {
    content: "";
    display: block;
    
  }
  &:hover {
    &:before {
       content: "";
      display: block;
      width: 400px;
      height: 400px;
      background: green;
      position:relative;
    }
    &:after {
       content: "india";
      display: block;
      width: 400px;
      height: 400px;
      background: green;
     position:absolute;
     top:50%;
    }
  }
}