html - 如何使用:before和:after伪元素

This question already has answers here:

CSS technique for a horizontal line with words in the middle
（21个答案）
去年关门了。
我正在努力实现：

具有:before和:after伪元素。有人能帮我吗？

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

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

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

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

最佳答案

你可以这样做：

h3 {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

h3:before,
h3:after {
  content: "";
  position: absolute;
  top: 30px; /* adjust */
  background: blue;
  width: 30%; /* adjust */
  height: 1px; /* adjust */
}

h3:before {left: 0}
h3:after {right: 0}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

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