与样式化组件一起使用的前后伪类 [英] Before and After pseudo classes used with styled-components

问题描述

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

我知道您可以使用

&:hover {}

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

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

我曾尝试将&:before和&:after策略用于一些相当复杂的示例，我不确定我的尝试不起作用是因为我的示例有问题，还是因为它不像那样工作。

有人对此有什么见解吗？谢谢。

css

styled-components中的伪选择器的工作方式与推荐答案中的一样。(或者更确切地说，Sass)任何不起作用的东西都可能是您特定代码中的问题，但如果不看到实际代码，就很难进行调试！

以下是如何使用简单:after：

的示例

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

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

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

这篇关于与样式化组件一起使用的前后伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！