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

我知道你可以使用

&:hover {}

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

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

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

有人对此有一些了解吗？谢谢.

我有一个名为“ExplanationLists”的 React 组件，我想li使用 css 伪代码将动态内联样式添加到html 元素中li::after，这样我就可以更好地使用图形来设置项目符号的样式。例如，

li::before {
    content: dynamic_content;
}

但是，我无法真正做到这一点。任何建议将不胜感激。

下面是我写的代码。

class ExplanationLists extends Component{
    populateHtml(){
        // asign lists data into variable "items"
        var items = this.props.items; 

        // loop though items and pass dynamic style into li element
        const html = items.map(function(item){
            var divStyle = {
                display: "list-item",
                listStyleImage: 
                    'url(' +  
                    '/images/icons/batchfield_fotograf_rosenheim_icon_' + 
                    item.icon +
                    '.png' +
                    ')'   
            };  

            // html templating 
            return (
                 <li style={divStyle}>
                   <h3 >{item.title}</h3>
                   <p>{item.desc}</p>
                 </li>
            );
        });

        // return …

我有以下样式组件，我正在尝试添加一个 unicode 字符\00d7作为伪选择器的内容，它是一个交叉或关闭图标。

然而，这似乎不像在 css 中那样工作。当然，我可以为这个关闭图标使用 svg 作为替代方案，我只是想知道这是否可以使用样式组件？它似乎允许空白的伪选择器，例如''

const Close = styled.span`
  color: pink;
  &:before {
    content: '\00d7';
  }
`

我在样式组件中动态渲染内容时遇到了麻烦.

难道我做错了什么？

我静态地在内容之前渲染伪时没有问题,但是当我动态地尝试它时它不起作用.

反应组件

const Test = (props) => {

    return (
        <Text before={12345}>
            {props.children}
        </Text>
    );

};

样式组件(不起作用)

const Text = styled.span`

    &:before {
        content: ${props => {
            console.log(props.before); // I see '12345' in log.
            return props.before;
            }
    }


`;

样式组件(这很好)

const Text = styled.span`

    &:before {
        content: '12345'
    }


`;