Javascript 尽管使用了显示块，但在React on段落标记中未显示伪元素

这个伪元素

：：after

根本不会显示在我的浏览器中。我正在使用React.js和materialui

makeStyles

代码如下：

modalTitle: {
    borderBottom: '2px solid red',
    display: 'block',
    margin: '10px 15px',
    padding: '0',
    width: '100px',

    '&::after': {
        background: 'green',
        content: '',
        display: 'block',
        height: '2px',
        width: '2px',
    },
},

---

请注意，下面的代码

modalTitle

显示并工作，只有伪元素不通过。有什么想法吗？

这是个棘手的问题。使用

makeStyles

时，它接受一个styles对象（或一个返回对象的函数）。此对象将类名作为键，将包含属性值对的对象作为值。这些值是字符串（如

“block”

，

“green”

，或

“10px 15px”

）

CSS中的

：：before

和

：：after

伪元素允许我们在页面上插入内容。每个伪元素都必须有一个CSS

content

属性，没有它，content的默认值设置为

normal

/

none

，并且不显示任何内容

代码的问题是在对象中添加了

内容：'

，但需要传递一个空字符串作为CSS值，如下所示：

内容：''''

类似地，如果要使用

content

插入一些文本，则不能简单地添加字符串，需要在文本周围使用引号并将其作为字符串传递：

// ❌ this one doesn't work
{
  content: 'some text',
}

// ✅ this one does work
{
  content: '"some text"',
}

因此，您可以使用以下命令，它将添加元素：

const useStyles=makeStyles({
模式：{
borderBottom:'2px纯红'，
显示：“块”，
保证金：“10px 15px”，
填充：“0”，
宽度：“100px”，
“&：：在”：{
背景：“绿色”，
内容：“”“”，
显示：“块”，
高度：“2px”，
宽度：“2px”，
},
},
});