Псевдоселектор в Material-UI со стилями, не отображаемыми на странице

Question

Это действительно странно. Я элемент, которому нужно добавить 2 псевдоселектора: ::before и ::after. ::before отображается на странице, но ::after нет. Но синтаксис тот же.

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,
    }
  }
}

Вот элемент, к которому он применяется:

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

Answer 1

Значение для контента должно быть , заключенное в кавычки .

Это позволяет компилировать его в правильное представление CSS с кавычками.

content: "'test'",

или

content: '"test"',