Before and After pseudo classes used with styled-components
ReactjsPseudo ClassStyled ComponentsReactjs Problem Overview
What is the proper way to apply :before
and :after
pseudo classes to styled components?
I know that you can use
&:hover {}
to apply the :hover
pseudo class to a styled-component.
Does this work for All pseudo elements like before and after?
I have tried using the &:before
and &:after
strategy with some rather complex examples and i'm not sure if my attempts are not working because i've got something wrong with my example or it just doesn't work like that.
Does someone have some insight on this? Thank you.
Reactjs Solutions
Solution 1 - Reactjs
Pseudo-selectors in styled-components
work just like they do in CSS. (or rather, Sass) Whatever isn't working is likely a problem in your specific code, but that's hard to debug without seeing the actual code!
Here is an example of how to use a simple :after
:
const UnicornAfter = styled.div`
&:after {
content: " 🦄";
}
`;
<UnicornAfter>I am a</UnicornAfter> // renders: "I am a 🦄"
If you post your code I'll likely be able to help debug your specific issue!
Solution 2 - Reactjs
This will print the triangle at middle of the 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;
}
`;
Solution 3 - Reactjs
This is good and simple answer:
https://stackoverflow.com/a/45871869/4499788 by mxstbr
but for elements requiring more complex logic I prefer this approach:
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;
}
`;
Solution 4 - Reactjs
As an object (note the double quotes):
const Div = styled.div({
'&:before': {
content: '"a string"',
},
})
Solution 5 - Reactjs
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);