时间戳

首页 > 解决方案 > 尽管使用了显示块，但伪元素未在 React on 段落标记中显示

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

问题描述

这个伪元素::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显示并有效，只有伪元素没有通过。有什么想法吗？

标签： javascriptcssreactjsmaterial-uijsx

解决方案

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

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

推荐阅读