Typing problems when using pseudo selectors

[itsdouges]

 css={{
        color: 'currentColor',
        textDecoration: 'none',
        position: 'relative',
        ':before': {
          opacity: 0,
          content: '⚓',
          position: 'absolute',
          left: '-5rem',
          fontSize: '3rem',
        },
        ':hover': {
          ':before': {
            opacity: 1,
          },
        },
      }}

Type '{ color: string; textDecoration: string; position: "relative"; ':before': { opacity: number; content: string; position: string; left: string; fontSize: string; }; ':hover': { ':before': { opacity: number; }; }; }' is not assignable to type 'string | CSSProperties | (string | CSSProperties)[] | { [key: string]: CSSProperties; }'.
  The types of '':before'.position' are incompatible between these types.
    Type 'string' is not assignable to type 'PositionProperty'.ts(2322)