Chakra-Ui - using media queries with pseudos

0
votes

I wasn't able to find the answer in the documentation. I want ::after to be applied only after min-width: 500px. Is there way to do this? Thanks

 <Flex
  justify="space-between"
  position="relative"
  _after={{
    content: "''",
    position: 'absolute',
    bottom: '-2rem',
    height: '0.0625rem',
    width: '100%',
    backgroundColor: 'divider',
  }}
>
1
chakra-ui

1 Answers

0
votes

This worked if anyone has same problem

<Flex
  justify="space-between"
  position="relative"
  sx={{
    '@media screen and (min-width: 30rem)': {
      '&::after': {
        content: "''",
        position: 'absolute',
        bottom: '-2rem',
        height: '0.0625rem',
        width: '100%',
        backgroundColor: 'divider',
      },
    },
  }}
>