reactjs - React Emotion 是否支持 ::before/ ::after 选择器？

Question

我正在尝试使用React Emotion设置一条中间有文本的水平规则。它看起来像这样：

----------------------SOME TEXT----------------------------------

我在 StackOverflow 上找到了有关如何使用 CSS 执行此操作的示例，但它对我不起作用。

这是我正在使用的 DIV，但它不起作用。

这可以用 react Emotion 设置吗？我错过了什么？

<div
  css={{
    display: 'flex',
    lineHeight:'1em',
    color:'gray',
    '&:before, &:after': {
        content:'',
        display:'inline-block',
        flexGrow:'1px',
        marginTop:'0.5em',
        backgroundColor:'gray',
        height:'1px',
        marginRight:'10px',
        marginLeft:'10px'
    }
   
  }}
>
  SOME TEXT
</div>

标签： reactjsemotion

Answer 1

您的代码对::beforeand::after语法是正确的，但是，在尝试复制时，我发现了两个错误：

1. flexGrow 不应该有一个 px 单位，只有1：flexGrow:'1
2. 内容应该有双引号content:'""'

<div
    css={{
      display: 'flex',
      lineHeight:'1em',
      color:'gray',
      '&:before, &:after': {
          content:'""',
          display:'inline-block',
          flexGrow:'1',
          marginTop:'0.5em',
          backgroundColor:'gray',
          height:'1px',
          marginRight:'10px',
          marginLeft:'10px'
      }
    }}
  >