什么是应用适当的方式:before和:after伪类风格的组成部分？
我知道你可以使用
&:hover {}
将:hover伪类应用于样式组件。
这对之前和之后的所有伪元素都有效吗？
我已经尝试在一些相当复杂的例子中使用&:beforeand&:after策略，但我不确定我的尝试是否不起作用，因为我的例子有问题，或者它只是不那样工作。
有人对此有所了解吗？谢谢你。
与样式组件一起使用的 Before 和 After 伪类
IT技术
reactjs
pseudo-class
styled-components
2021-04-21 00:37:11
5个回答
伪选择器styled-components就像在 CSS 中一样工作。（或者更确切地说，Sass）无论什么不起作用，都可能是您的特定代码中的问题，但是如果没有看到实际代码，就很难调试！
以下是如何使用 simple 的示例:after：
const UnicornAfter = styled.div`
&:after {
content: " 🦄";
}
`;
<UnicornAfter>I am a</UnicornAfter> // renders: "I am a 🦄"
如果您发布代码，我可能会帮助调试您的特定问题！
这将在 div 的中间打印三角形。
const LoginBackground = styled.div`
& {
width: 30%;
height: 75%;
padding: 0.5em;
background-color: #f8d05d;
margin: 0 auto;
position: relative;
}
&:after {
border-right: solid 20px transparent;
border-left: solid 20px transparent;
border-top: solid 20px #f8d05d;
transform: translateX(-50%);
position: absolute;
z-index: -1;
content: "";
top: 100%;
left: 50%;
height: 0;
width: 0;
}
`;
这是一个很好而简单的答案：
https://stackoverflow.com/a/45871869/4499788 by mxstbr
但对于需要更复杂逻辑的元素，我更喜欢这种方法：
const Figure = styled.div`
${Square}:before,
${Square}:after,
${Square} div:before,
${Square} div:after {
background-color: white;
position: absolute;
content: "";
display: block;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
`;
作为一个对象（注意双引号）：
const Div = styled.div({
'&:before': {
content: '"a string"',
},
})
Can try like this.
It works perfectly fine
var setValue="abc";
var elementstyle = '<style>YourClass:before { right:' + abc + 'px;}</style>'
$(".YourClass").append(setValue);
var rightMarginForNotificationPanelConnectorStyle = '<style>.authenticated-page.dx-authenticated .dx-notification .dx-notification-dialog.dx-content-frame:before { right:' + rightMarginForNotificationPanelConnectorWithBadge + 'px;}</style>'
$(".authenticated-page.dx-authenticated .dx-notification .dx-notification-dialog.dx-content-frame").append(rightMarginForNotificationPanelConnectorStyle);