JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="foo"></div>

SCSS

.foo {
  font-size: 10vmin;
  margin: 10vmin;
  
  &::before {
    content: 'a';
    position: absolute;
    transition: opacity 100ms;
    transition-delay: 75ms;
  }
  
  &::after {
    content: 'b';
    opacity: 0;
    transition: opacity 50ms;
    transition-delay: 0s;
  }

  &:hover {
    &::before {
      opacity: 0;
      transition-duration: 50ms;
      transition-delay: 0s;
    }
    &::after {
      opacity: 1;
      transition-duration: 100ms;
      transition-delay: 75ms;
    }
  }
}