如何添加伪元素：使用 REACT 之后

Question

我正在尝试使用 REACT 让信封图标显示在信封链接之后

在我的 index.js 文件中，我有：

              <Envelopestyling>
               
                <p><i className="fas fa-envelope"><Link>Envelope</Link></i></p>
              </Envelopestyling>

在我的 style.js 文件中，我有：

export const Envelopestyling = styled.div`
  position: relative;
  border: 2px solid black;
  border-radius: 5px;
  background: #fff;
  margin: 10px 0;
  padding: 10px;
  text-align: left;

& . fas fa-envelope{ position: absolute, top:10px, colour: #000}
& .fas fa-envelope:after{
content:"\f0e0";
}
`;

所有这些都是复制信封图标：一个在信封链接之前，另一个在它之后，但我想要的是信封链接之后的信封。

非常感谢任何帮助。谢谢

Answer 1

我看到问题是您使用 css 选择器的方式错误。你需要像这样更新：

& .fas.fa-envelope{ position: absolute, top:10px, colour: #000}
& .fas.fa-envelope:after{
  content:"\f0e0";
}