How to use this pseudo a::hover::after in Chakra UI?

Question

I am trying some css styles that requires the use of the pseudo a::hover::after, I assumed that as stated in the documentation that as I can do this to use the hover pseudo:

<Link _hover={{//styles here}}/>

In the same sense using hover::after should be like this:

<Link _hover_after={{//styles here}}/>

But it doesn't seem to work, and I can't find a clue about this particular use in the documentation. How can I use the pseudo ::hover::after on a React element with Chakra UI ?

Answer 1

I faced that problem before and I couldn't find a solution. But I made a workaround using a isHovering state so when onMouseOver event set it to true and onMouseLeave you set it to false and adding conditional styles. See an example:

const LinkElement = () => {
    const [isHovering, setIsHovering] = useState(false);

    return <Link 
                _after={ color: isHovering ? 'red' : 'blue' } 
                onMouseEnter={() => setIsHovering(true)}
                onMouseLeave={() => setIsHovering(false)}
            />
}