How to use the :before and :after pseudo-elements

Question

I'm trying to achieve:

with the :before and :after pseudo-elements. Can anyone help me out?

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>

What are you trying to achieve? – Johannes Piontkowitz Apr 26 '18 at 08:59 — Johannes Piontkowitz, Apr 26 '18 at 08:59
Do the pseudo elements need to be those of the `i` element? – Danny Apr 26 '18 at 09:57 — Danny, Apr 26 '18 at 09:57

score 2 · Accepted Answer · answered Apr 26 '18 at 09:30

You can do something like this:

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>

score 1 · Answer 2 · answered Apr 26 '18 at 09:14

1

It is working on my side... What problem are you getting? Maybe try and be more specific by selecting the class and not the tag only.

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

answered Apr 26 '18 at 09:14

Tanya Rix

69
10

I want the icon to be in the middle of the line – Opu Apr 26 '18 at 09:17

How to use the :before and :after pseudo-elements

2 Answers2