Before and After pseudo classes used with styled-components

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!

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

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