Псевдоклассы до и после, используемые со стилями-компонентами

Псевдоселекторы в 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;
  }
`;

Это хороший и простой ответ:

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