尽管使用了显示块，但React中段落标记上没有显示伪元素

Question

这个伪元素::after根本不会出现在我的浏览器中。我使用的是React.js和Material UImakeStyles。

这是代码：

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下面的代码显示并工作，只有伪元素没有通过。有什么想法吗？

Answer 1

这是一个棘手的问题。使用makeStyles时，它接受样式对象(或返回对象的函数(。该对象具有作为键的类名和包含作为值的属性值对的对象。这些值是字符串(如"block"、"green"或"10px 15px"(。

CSS中的::before和::after伪元素允许我们在页面上插入内容。每个伪元素都必须有一个CSScontent属性，如果没有它，内容的默认值将设置为normal/none，并且不会显示任何内容。

代码的问题是在对象中添加了content: ''，但需要传递一个空字符串作为CSS值，如下所示：content: '""'。

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

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

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

const useStyles = 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',
},
},
});