reactjs - 与样式组件一起使用的伪类之前和之后

将:before和:after伪类应用于样式化组件的正确方法是什么？

我知道你可以用
&:hover {}
将:hover伪类应用于样式化组件。

这是否适用于所有伪元素，例如之前和之后？

我已经尝试将&:before和&:after策略用于一些相当复杂的示例，但是我不确定我的尝试是否奏效，因为我的示例有问题，或者那样行不通。

有人对此有见识吗？谢谢。

最佳答案

styled-components中的伪选择器的工作方式与CSS中的类似。 (或更确切地说，Sass)无论什么都不起作用，可能是您的特定代码中存在问题，但是如果不查看实际代码就很难调试!

这是一个如何使用简单:after的示例:

const UnicornAfter = styled.div`
  &:after {
    content: " 🦄";
  }
`;

<UnicornAfter>I am a</UnicornAfter> // renders: "I am a 🦄"

如果您发布您的代码，我将可能能够帮助您调试特定问题!