与样式组件一起使用的之前和之后伪类

Question

将 :before 和 :after 伪类应用于样式化组件的正确方法是什么？

我知道你可以使用

&:hover {}

将 :hover 伪类应用于样式组件。

这适用于之前和之后的所有伪元素吗？

我已经尝试使用 &:before 和 &:after 策略和一些相当复杂的例子，我不确定我的尝试是否不起作用，因为我的例子或它有问题只是不能那样工作。

有人对此有一些见解吗？谢谢你。

原文由 archae0pteryx 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这将在 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;
  }
`;

原文由 Nalan Madheswaran 发布，翻译遵循 CC BY-SA 4.0 许可协议