Document how to use _hover with pseudo elements

[brekk]

Subject

Using _hover attributes with pseudo-elements

Description

There is existing documentation regarding styling elements on_hover as well as documentation around using _before / _after to style pseudo-elements.

However, I wasn't able to find any documentation which specified how to style pseudo elements while hovering.

I eventually figured it out:

<Flex
  _hover={{
    background: 'red',
    '&::before': {
        content: '""',
        left: '4.25rem',
        width: 0,
        height: 0,
        border: '10px solid transparent',
        borderRightColor: colorMode === 'dark' ? 'black' : 'white',
        display: { base: 'flex', sm: 'none' },
    }
  }}
>
  cool
</Flex>

The &::before selector within the _hover object is the example I'd like to be better documented, I tried _before and ::before and before to no avail -- it wasn't until I looked at this file that I arrived at the correct answer.

[nikolovlazar]

Good point, @brekk! Thanks for opening this issue.

[stale[bot]]

Hi! This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs within 5 days. Thank you for your contributions.

[stale[bot]]

Hi! This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs within 5 days. Thank you for your contributions.

[stale[bot]]

Hi! This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs within 5 days. Thank you for your contributions.

[stale[bot]]

Hi! This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs within 5 days. Thank you for your contributions.

[brekk]

I believe this is still a valid issue