如何使用 :before 和 :after 伪元素 [重复]答案

【问题标题】：How to use the :before and :after pseudo-elements [duplicate]如何使用 :before 和 :after 伪元素 [重复]
【发布时间】：2018-10-06 21:46:25
【问题描述】：

我正在努力实现：

使用: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>

【问题讨论】：

你想达到什么目的？
伪元素是否需要是i元素的伪元素？

标签： html css font-awesome pseudo-element

【解决方案1】：

你可以这样做：

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>

【讨论】：

【解决方案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>

【讨论】：

我希望图标在行的中间