Object notation for pseudo elements

[boardgames]

I tried a lot of options like

const keyframesShapeTransform = keyframes`
  from {
    border-radius: 50%;
  }
  to {
    border-radius: 0px;
  }
`;

const spinnerAfterBefore = {
  content: '',
  position: 'absolute',
  width: '100%',
  height: '100%',
  borderRadius: '50%',
  boxSizing: 'border-box',
  transition: 'all 0.47s ease',
  backgroundColor: 'rgb(255,255,255)',
  boxShadow: '0 0 5px 1px rgba(0,0,0,0.25)',
  animation: `${keyframesShapeTransform} 1.18s ease infinite alternate`,
}

export const spinnerStyle = {
  position: 'absolute',
  margin: 'auto',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  width: '15px',
  height: '15px',
  borderRadius: '50%',
  boxSizing: 'border-box',
  backgroundColor: 'rgb(255,255,255)',
  boxShadow: '0 0 5px 1px rgba(0,0,0,0.25)',
  transition: 'all 0.47s ease',
  animation: `${keyframesVentilator} 2.35s ease-in-out infinite reverse`,
  ':before': {
    ...spinnerAfterBefore,
    left: '-125%',
    borderLeft: '1px solid rgb(176,98,121)',
  },
  ':after': {
    ...spinnerAfterBefore,
    right:' -125%',
    borderRight: '1px solid rgb(176,98,121)',
  }
}

or

export const spinnerStyle = {
  '&:before': {
    ...spinnerAfterBefore,
    left: '-125%',
    borderLeft: '1px solid rgb(176,98,121)',
  },
  '&:after': {
    ...spinnerAfterBefore,
    right:' -125%',
    borderRight: '1px solid rgb(176,98,121)',
  }
}

Nothing works for me. How will be correct to do one?

It exports to css class like

.cMTpUh{
position:absolute;
margin:auto;top:0;right:0;bottom:0;left:0;width:15px;height:15px;border-radius:50%;box-sizing:border-box;background-color:rgb(255,255,255);box-shadow:0 0 5px 1px rgba(0,0,0,0.25);-webkit-transition:all 0.47s ease;transition:all 0.47s ease;-webkit-animation:iVXCSc 2.35s ease-in-out infinite reverse;animation:iVXCSc 2.35s ease-in-out infinite reverse;
&::before: left:-125%;border-left:1px solid rgb(176,98,121);
}