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>

Answer 1

您的代码是正确的 ::before和 ::after句法，
但是，在尝试复制时，我发现了两个错误:

flexGrow 不应该有 px 单位，只有 1 :flexGrow:'1

内容应该有双引号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'
      }
    }}
  >