Before and After pseudo classes used with styled-components

Question

What is the proper way to apply :before and :after pseudo classes to styled components?

I know that you can use

&:hover

Answer 1

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;
  }
`;

Answer 2

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

Answer 3

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;
  }
`;

Answer 4

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: "