css - 使用 Rebass 悬停效果和伪元素样式做出反应

Question

我正在使用带有 rebass 的 create-react-app。如何添加伪元素？

import React from 'react'
import { Box, Card, Image, Heading, Text } from 'rebass'
import Test from './test.css'
function Pokemon({ pokemon }) {
    return (
        <Box
            p={3}
            fontSize={2}
            width={180}
            color='black'
            bg='grey'
            className={Test.test}
        >
            <Card
                width={128}
                sx={{
                    '::after': {
                        content: '',
                        width: '10px',
                        height: '10px',
                        backgroundColor: 'black',
                        display: 'block',
                    },
                }}
            >
                <Image
                    src={pokemon.sprites?.front_default}
                    css={{
                        '::after': {
                            content: '',
                            width: '10px',
                            height: '10px',
                            background: 'black',
                            display: 'block',
                        },
                    }}
                />
                <Heading>Name: {pokemon.name}</Heading>
                <Text fontSize={0}>
                    Weight: {pokemon.weight} Height: {pokemon.height}
                </Text>
            </Card>
        </Box>
    )
}

export default Pokemon

但什么也没发生……

编辑：我现在自己才发现：

<Box
    p={3}
    fontSize={2}
    width={180}
    color='black'
    bg='grey'
    css={{
        '&:hover::before': {
            content: "''",
            width: '30px',
            height: '30px',
            background: 'orange',
            display: 'block',
        },
    }}
>
    <Card
        width={128}
        css={{
            '&::after': {
                content: "''",
                width: '30px',
                height: '30px',
                backgroundColor: 'black',
                display: 'block',
            },
        }}
    >

但是 :hover::before 似乎不适用于图像..