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

【问题标题】：Pseudo element not showing in React on paragraph tag despite using display block尽管使用了显示块，但伪元素未在 React on 段落标记中显示
【发布时间】：2021-01-06 22:39:27
【问题描述】：

这个伪元素::after 根本不会出现在我的浏览器中。我正在使用 React.js 和 Material UI 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 下面的代码会显示并有效，只有伪元素没有通过。有什么想法吗？

【问题讨论】：

标签： javascript css reactjs material-ui jsx

【解决方案1】：

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

CSS 中的::before 和::after 伪元素允许我们在页面上插入内容。每个伪元素都必须有一个 CSS content 属性，没有它的内容默认值设置为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',
    },
  },
});

【讨论】：