JSFiddle - React, Tailwind, and code Playground

by gentou

HTML

<a class="cross">
  <span class="one"></span>
  <span class="two"></span>
</a>

SCSS

.cross{
  display: block;
  position: relative;
  width: 100px;
  overflow: hidden;
  background-color: red;
  &:after{
    content: "";
    display: block;
    padding-bottom: 100%;
  }
  &:hover{
     .one{
    transform: translate(-50%, -50%) rotate(45deg);
 }
 
 .two{
        transform: translate(-50%, -50%) rotate(-45deg);
 }
  }
}

.one , .two{
  position: absolute;
  height: 5px;
  width: 141%;
  background-color: green;
  top: 50%;
  left: 50%;
}
 .one{
    transform: translate(-50%, -50%) 
 }
 
 .two{
        transform: translate(-50%, -50%) 
 }