Pseudo Selector in Material-UI withStyles not rendering to page

Question

This is really weird. I an element that I need to add 2 pseudo selectors to: ::before and ::after. ::before is rendering to the page, but ::after is not. But the syntax is the same.

const styles = {
  Typography: {
    overflow: 'hidden',
    position: 'relative',
    lineHeight: '1.2em',
    height: '3.6em',
    textAlign: 'justify',
    marginRight: '-1em',
    paddingRight: '1em',
    '&:after': {
      content: 'test',
      position: 'absolute',
      right: 0,
      width: '1em',
      height: '1em',
      marginTop: '0.2em',
      backgroundColor: 'white'
    },
    '&:before': {
      content: "'...'",
      position: 'absolute',
      right: 0,
      bottom: 0,
    }
  }
}

Here is the element that it is being applied to:

<Typography component="p" className={classes.Typography}> 
    {incident.incident_description}
</Typography>

Answer 1

The value for content needs to be wrapped in quotes.

This makes so that it is compiled to the correct CSS representation with the quotes.

content: "'test'",

or

content: '"test"',