CSS x to check animation

CloseConfirm.module.scss

/** CloseConfirm.module.scss - Animated x → ✓
 * @see https://codepen.io/gdibble/pen/LYePYXL
 * @example <button className={styles.CloseConfirm} type="button" onClick={someFn}><div className="check"> </div></button>
 */
 
$SkyBlue100: #08b2e3;

.CloseConfirm {
  position: absolute;
  top: 0.25em;
  right: 0.25em;
  background-color: transparent;
  border: 0 none;
  box-sizing: border-box;
  font-size: 1.2em;
  cursor: pointer;

  div {
    position: relative;
    width: 1.3em;
    height: 1.3em;

    // Animated x → ✓   - an inverse of https://codepen.io/ekeric13/pen/oYoXbK
    // Start as x
    &::before {
      width: 1.2em;
      height: 0.2em;
      top: 0.6em;
      left: 0.25em;
      transform: rotate(-45deg);
      position: absolute;
      background: #fff;
      border-radius: 3px;
      content: '';
      transition: transform 0.5s ease-in-out, background 0.5s ease-in-out;
    }
    &::after {
      width: 1.2em;
      height: 0.2em;
      top: 0.6em;
      left: 0.25em;
      transform: rotate(45deg);
      position: absolute;
      background: #fff;
      border-radius: 3px;
      content: '';
      transition: transform 0.5s ease-in-out, width 0.5s ease-in-out, top 0.5s ease-in-out,
        left 0.5s ease-in-out, background 0.5s ease-in-out;
    }
    // Hover as ✓
    &:hover::before {
      transform: rotate(-55deg);
      background: $SkyBlue100;
    }
    &:hover::after {
      width: 0.7em;
      height: 0.2em;
      top: 0.85em;
      left: 0;
      transform: rotate(45deg);
      background: $SkyBlue100;
    }
  }
}