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

Question

我试图实现：

使用:before和:after 伪元素。任何人都可以帮助我吗？

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以这样做：

＆＃13;

＆＃13;

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}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

它正在我这边工作......你遇到了什么问题？也许通过选择类而不是标签来尝试更具体。

.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>