Material-Ui apply pseudo class '::before' with component class props

Question

I try to use a pseudo class for the mui-app-bar. Ive read some questions about it here. But it didnt bring me any further. My component looks like this:

const styles = (theme: Theme) => createStyles({
    appBar: {
        backgroundColor: theme.palette.background.default,
        height: '48px',
        '&::before': {
            content: "",
            position: 'absolute',
            left: '2.5%',
            bottom: 0,
            right: '2.5%',
            width: '95%',
            borderBottom: '1px solid magenta',
        }
    }
});

class TabBar extends React.Component<WithStyles<typeof styles> & WithTranslation, TabBarInterface> {
...
render() {
        const { classes } = this.props;
        ...

        return (
                <AppBar className={classes.appBar} position="relative">
                  ...
                </AppBar>

        );
    }
}

export default withStyles(styles)(withTranslation()(TabBar));

Edit

Applying the pseudo class with one colon did not work for me either.

Answer 1

It is because content value actually is empty. You need to use something like:

'&::before': { 
  content: '""',
}

Answer 2

我发现向 html5 标题元素添加伪类不起作用。

Answer 3

Saw that the default is:

'&::before': { 
   content: '""',
}

Instead I overrode it using:

'&::before': { 
    content: 'none',
}