使用样式组件的伪类之前和之后

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

我知道，你可以使用

&:hover {}

到:hover伪类适用于一个风格的分量。

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

我已经尝试使用&:before和&:after战略与一些相当复杂的例子，我不知道如果我的企图不工作，因为我有我的例子有问题，或者它只是不这样工作。

有人对此有所了解吗？谢谢。

来源

2017-08-24 archae0pteryx

styled-components中的伪选择器就像在CSS中一样工作。（或更确切地说，Sass）不管什么不工作都可能是你的特定代码中的一个问题，但是如果没有看到实际的代码就很难调试！

下面是如何使用一个简单的:after一个例子：

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

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

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

来源

2017-08-24 22:31:13 mxstbr

这没有必要。感谢您澄清！我只是需要确定它是否在我的末端...... =）我不确定'''＆：before'''和'''：:''''是否正在工作。我无法通过谷歌找到明确的答案...所以...谢谢！ – archae0pteryx

不用担心，乐意帮忙！ – mxstbr

@mxstbr嗨，mxstbr！我在动态呈现Pseudo-before内容时遇到问题。我做错了吗？或者它是风格化的 - 组件不支持。 https://stackoverflow.com/questions/46339034/how-to-render-pseudo-before-content-dynamically-in-styled-component/46339194#46339194 – hytm

使用样式组件的伪类之前和之后

回答

相关问题