conditionally show after pseudo element react and styled components

Question

I am using react with styled components and I have a resizable panel and one of the panels contains an iframe. I was trying to fix a drag issue by using an after pseudo element and setting a backdrop-filter conditionally however having the after element always steals the click events. Is there a way to conditionally show the '&:after' element and not just the backdrop-filter?

export const IframeWrapper = styled(FlexColumn)`
  justify-content: flex-end;

  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    backdrop-filter: ${props => props.isDragging && 'blur(5px)'};
  }
`;

Answer 1

Working code with help from Mr T:

export const IframeWrapper = styled(FlexColumn)`
  justify-content: flex-end;

  ${({ isDragging }) => isDragging &&
    css`
      &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        backdrop-filter: blur(5px);
      }
    `
  }
`;