Html 如何使用：before和：after伪元素

我正在努力实现：

使用

：before

和

：after

伪元素。有人能帮我吗

i:before{
内容：“；
背景：蓝色；
显示：块；
宽度：50px；
高度：1px；
}
i:之后{
内容：“；
背景：蓝色；
显示：块；
宽度：50px；
高度：1px；
}

关于我们

它在我这边起作用。。。你有什么问题？也许可以尝试通过选择类而不仅仅是标记来更具体一些

.fa:before {
 content: "";
 background: blue;
 display: block;
 width: 50px;
 height: 1px;    }

 .fa:after {
 content: "";
 background: blue;
 display: block;
  width: 50px;
  height: 1px;     }

 <div>
  <h3>About Us</h3>
  <i class="fa fa-comments-o"></i>
 </div>

.fa:之前{
内容：“；
背景：蓝色；
显示：块；
宽度：50px；
高度：1px；}
英足总：之后{
内容：“；
背景：蓝色；
显示：块；
宽度：50px；
高度：1px；}
关于我们

您可以执行以下操作：

h3{
位置：相对位置；
显示：内联flex；
弯曲方向：立柱；
对齐项目：居中；
}
h3：之前，
h3：之后{
内容：“；
位置：绝对位置；
顶部：30px；/*调整*/
背景：蓝色；
宽度：30%；/*调整*/
高度：1px；/*调整*/
}
h3:在{左：0}之前
h3:在{right:0}之后

关于我们<代码>你想要达到什么？伪元素需要是<代码> i>代码>元素吗？我希望图标在直线的中间。