reactjs - 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

内容的值需要为 wrapped in quotes .

这使得它被编译为带有引号的正确 CSS 表示形式。

content: "'test'",

或

content: '"test"',