Css 使用伪代码为具有样式化组件的单选按钮设置样式

我开始了解样式化组件是如何工作的，但我遇到的一个问题是伪代码。对我来说，目前似乎没有如预期的那样起作用。我希望单选按钮在按钮内显示支票。按钮的样式设置正确，但没有出现复选标记

样式化组件

export const FormRadio = styled.input.attrs(props => ({
    type: 'radio',
    name: 'action',
    id: 'action-radio-1',
    value: props.value,
}))`
    appearance: none;
    display: inline-block;
    position: relative;
    background-color: #f1f1f1;
    color: #254294;
    height: 1.5em;
    width: 1.5em;
    border: 0;
    border-radius: 1em;
    cursor: pointer;
    margin-right: 0.274vw;
    outline: none;

    &:checked::before {
        position: absolute;
        font: 17px/1 'Open Sans', sans-serif;
        left: 0.45em;
        top: 0.12em;
        content: '\02143';
        transform: rotate(40deg);
    }
`;

---

你的内容似乎破坏了它。因为它是绝对定位的，所以需要为样式添加宽度和高度

因此，类似这样的东西应该可以工作请注意，我简化了组件，将重点放在checked:before:

---

谢谢事实上，我最终通过分类找到了答案，并注意到当我删除内容属性时，它开始显示出来。奇怪的是，内容值不起作用，因为它在标准CSS中工作，但不管怎样，它现在很好。是的，我认为它更多地与输入有关，不一定与标准CSS和样式化组件有关，但我发现这也很奇怪！

const Test = styled.input`
&[type="radio"]{

  position: absolute
  &:checked:before{
      content:"";
      font: 17px/1 'Open Sans', sans-serif;
      position:absolute;
      width: 100%;
      height: 100%;
      background:orange;
      border-radius: 100%;
      left: 0;
      top: 0;
    }

}

`;