与样式组件一起使用的 Before 和 After 伪类

Posted 2023-03-06

【中文标题】与样式组件一起使用的 Before 和 After 伪类

【英文标题】：Before and After pseudo classes used with styled-components

【发布时间】：2018-02-02 21:59:07

【问题描述】：

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

我知道你可以使用

&:hover

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

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

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

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

【问题讨论】：

这是您的问题吗？ ***.com/a/46373741/5515589

这么久了我都不记得了！

【参考方案1】：

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

下面是一个简单的:after使用示例：

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

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

如果您发布代码，我可能会帮助调试您的具体问题！

【讨论】：

没必要。谢谢你的澄清！我只需要确定这是我的结果... =) 我不确定&:before 和&:after 是否正常工作。我无法通过谷歌找到明确的答案......所以......谢谢！

别担心，乐于助人！

@mxstbr 嗨，mxstbr！我在动态渲染 Pseudo-before 内容时遇到问题。我做错了吗？还是 styled-components 不支持的东西。 ***.com/questions/46339034/…

我们可以在之前和之后应用到任何特定的孩子（即：first-child）吗？

【参考方案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;
  
`;

【参考方案3】：

这是一个简单的好答案：

https://***.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;
  
`;

【讨论】：

我无法使用 @emotion/babel-plugin 11.3.0 github.com/emotion-js/emotion/issues/2354

【参考方案4】：

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

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

【参考方案5】：

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

【讨论】：

问题是关于 styled-components 的，您正在使用纯 javascript 回答。此外，您的解决方案根本不是一个好习惯（使用 jquery、附加到 dom 等）。另外，请考虑改进答案的格式：将所有内容放在代码部分中