相关疑难解决方法(0)

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

我知道你可以使用

&:hover {}

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

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

我已经尝试使用&:before和&:after策略一些相当复杂的例子,我不确定我的尝试是否工作,因为我的例子有问题,或者它不能像那样工作.

有人对此有一些了解吗？谢谢.

在 中styled-components，我试图通过传递 React Icon 来在悬停时渲染它，content但由于某种原因，我的悬停渲染是[Object Object]。

成分：

export const FooLink = styled(Link)`\n  padding: 0.5rem 2rem;\n  color: ${({ theme }) => theme.colors.white};\n  text-align: center;\n  margin: 0 auto;\n  position: relative;\n  font-size: ${({ theme }) => theme.fontSizes.p};\n  letter-spacing: 0.15em;\n  transition: ${({ theme }) => theme.animations.trans3};\n\n  &:after {\n    content: \'${FaArrowRight}\';\n    /* content: \'>\'; */\n    position: absolute;\n    opacity: 0;\n    right: -${({ theme }) => theme.spacings.small};\n    transition: ${({ theme }) => theme.animations.trans3};\n  }\n\n  &:hover {\n    padding-right: ${({ theme …