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

Question

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

我知道你可以使用

&:悬停{}

将 :hover 伪类应用于样式组件。

这适用于所有伪元素(如之前和之后)吗？

我尝试使用 &:before 和 &:after 策略以及一些相当复杂的示例，但我不确定我的尝试是否不起作用，因为我'我的例子有问题或者它不能像那样工作。

有人对此有一些见解吗？谢谢。

Answer 1

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

以下是如何使用简单 :after 的示例:

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

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

如果您发布代码，我很可能能够帮助调试您的具体问题!