样式表中::before和::after伪元素不生效，Font Awesome图标无法显示如何解决

问题原因与修复方案 #

• 核心错误为font-family拼写错误：你代码中写的Font Awsome 5 Free少了1个字母e，正确拼写为Font Awesome 5 Free，拼写错误导致浏览器无法识别调用对应的字体文件，图标自然无法渲染。
• 缺失伪元素必要的渲染属性：你仅给父元素hr.camera设置了相对定位，::after伪元素没有设置绝对定位、偏移、背景等属性，就算字体调用正确，也无法正常显示在分割线中间位置。

修正后的完整CSS代码如下，HTML代码无需改动：

hr.camera {
  position: relative;
  padding: 0;
  text-align: center;
  border-top: 5px solid #f44336;
  max-width: 60%;
  margin: 2em auto;
}

hr.camera::after {
  content: '\f030';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  font-size: 24px;
  padding: 0 10px;
  color: #f44336;
}

注：代码中的background-color取值请和你页面的背景色保持一致，用于覆盖分割线中间的线条，字号、内边距、颜色都可以根据你的视觉需求自行调整。

内容的提问来源于stack exchange，提问作者Giosue Congiu