Question

这真的很奇怪。我需要为2个伪选择器添加一个元素：decoder: Decode.Decoder (Maybe Product) decoder = Decode.map ((List.sortBy .price) >> List.head) (Decode.field "data" (Decode.list productDecoder))和::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,
    }
  }
}

Answer 1

内容的值必须为wrapped in quotes。

这样可以将其编译为带引号的正确CSS表示形式。

content: "'test'",

或

content: '"test"',

Answer 2

您需要同时使用单引号和双引号

content: "'test'"

或

content: '"test"'

如果要使用变量，则可以使用模板字符串和引号

content: `'${yourVariable}'`

还请确保在::之后使用双冒号&

这样一个完整的例子看起来像这样

const useStyles = makeStyles((theme) => {
  const yourVariable = 'test';
  return (
    yourStyle: {
      //...
      '&::before': {
      content:  `'${yourVariable}'`
    }
  )
})

Material-UI中带有样式的伪选择器未呈现到页面

2 个答案: