Chakra-Ui - using media queries with pseudos

user_16212770 0
Viewed 669

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',
  }}
>
chakra-ui
2 Answers

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',
      },
    },
  }}
>
user_162127700

Why didn't you just use a display none?

You can use this syntax inside your after

display:["none","none","flex","flex","flex"],
user_177995840
Related