Reactjs 如何在样式化组件中使用伪类？

因此，正如我在标题中提到的，当我使用样式化组件时，我想在输入中使用：：after，但它不起作用。。我把我的代码放在下面，所以检查一下

从“样式化组件”导入样式化；
常量输入=styled.Input`
填充：25px 80px；
边界半径：100px；
利润率：15px 0px；
边界：无；
边框：2px solid${props=>props.theme.colors.grey}；
&：焦点{
大纲：无；
边框：2px solid${props=>props.theme.colors.main}；
}
：：之后{
内容：“嗨”
}
`;
导出默认输入您可以通过以下方式实现：

import styled from 'styled-components';

const div = styled.div`
    padding: 25px 80px;
    border-radius: 100px;
    margin: 15px 0px;
    border: none;
    border: 2px solid ${props => props.theme.colors.grey};
    &:focus {
        outline: none;
        border: 2px solid ${props => props.theme.colors.main};
    }
    &:after {
        content: "hi"
    }
`;

export default Input;

输入元素不允许使用前后伪类
我的解决方案对您有用吗，如果是，请接受我的回答否，我认为问题是，在输入中我们不能有：：before或：；是的，您是对的，我们不能在输入之后和之前，您可以签出此页面以获取更多信息：。我已编辑了答案，以便没有人接受错误的引用ID我的解决方案是否适合您，如果是，请接受我的回答。你能补充一句吗？小提琴还是片段？