Add pseudo-element on Material UI BottomNavigationAction

Question

I've been trying to add a pseudo-element to add an additional UI element to a selected item. It looks like this (the line that's located above the menu item)

Here is my code that for some reason not working (the line is not showing)

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            '& .MuiButtonBase-root.MuiBottomNavigationAction-root.Mui-selected': {
                '&::before': {
                    content: '',
                    display: 'inline-block',
                    width: '32px',
                    height: '3px',
                    position: 'absolute',
                    top: 0,
                    zIndex: 100,
                    background: theme.palette.primary.main,
                },
            },
    })
);

const TabBar: React.FC<IProps> = ({ value, handlePath }) => {
    const { root } = useStyles();

    return (
        <Container maxWidth="sm" className={root}>
            <BottomNavigation value={value} onChange={handlePath} showLabels>
                <BottomNavigationAction
                    label="Home"
                    value={Routes.HOME}
                    icon={<HomeIcon isActive={Routes.HOME === value} />}
                />
               //others tabs
            </BottomNavigation>
        </Container>
    );
};

Answer 1

Wrap content in single quotation marks.

content: '""'