Before and After pseudo 类 used with styled-components

Question

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

我知道你可以使用

&:hover {}

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

这是否适用于像之前和之后的所有伪元素？

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

有人对此有所了解吗？谢谢。

Answer 1

styled-components 中的伪选择器就像在 CSS 中一样工作。（或者更确切地说，Sass）任何不起作用的东西都可能是您的特定代码中的问题，但是如果不查看实际代码就很难调试！

这是一个如何使用简单 :after:

的例子

const UnicornAfter = styled.div`
  &:after {
    content: " ";
  }
`;

<UnicornAfter>I am a</UnicornAfter> // renders: "I am a "

如果您 post 您的代码，我很可能能够帮助调试您的具体问题！

Answer 2

这将打印 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 3

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 4

这是一个很好且简单的答案：

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

Answer 5

作为对象（注意双引号）：

const Div = styled.div({
  '&:before': {
    content: '"a string"',
  },
})

Before and After pseudo 类 used with styled-components

Before and After pseudo classes used with styled-components

pseudo-class

reactjs

styled-components