与样式化组件一起使用的 Before 和 After 伪类

小开

最佳答案

styled-components中的伪选择器的工作方式与 CSS 中的工作方式一样。(或者更确切地说，Sass)无法正常工作的可能是您的特定代码中的一个问题，但是在没有看到实际代码的情况下很难进行调试！

下面是一个如何使用简单 :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;
}
`;

小开

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);

小开

这是一个简单明了的答案:

Https://stackoverflow.com/a/45871869/4499788: 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"',
},
})

小开

添加到@mxstbr 回答

注意，当你想在基于道具之前进行渲染时，不要忘记用双引号(或单引号)包装它，例如:

const Button = styled.button`
&:before {
content:"${(props)=>props.theme==='dark'?'dark theme':'white theme'}";
}

因为

content:${(props)=>props.theme==='dark'?'dark theme':'white theme'};

没用的