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

Posted 2023-03-06

【中文标题】如何使用 :before 和 :after 伪元素 [重复]

【英文标题】：How to use the :before and :after pseudo-elements [duplicate]

【发布时间】：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元素的伪元素？

【参考方案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>

【讨论】：

我希望图标在行的中间