chakra-ui-docs
chakra-ui-docs copied to clipboard
Document how to use _hover with pseudo elements
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.
Good point, @brekk! Thanks for opening this issue.
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.
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.
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.
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.
I believe this is still a valid issue