pseudo element test

by ShaCP

HTML

<div class='container'>
<div class='section'>
<h3 class= 'section-heading'>
Hi
</h3>
</div>
<div class='section'>
<h3 class= 'section-heading'>
Hello
</h3>
</div>
<div class='section'>
<h3 class= 'section-heading'>
Hey
</h3>
</div>
</div>

CSS

body {
  display: inline-block;
}

.container {
  width: 150px;
  border: 1px solid black;
}

.section {
  text-align: center;
  /*margin: 0 16.02px 0 0;*/
}

.section-heading {
  margin: 0 16.02px 0 0;
}

.section-heading::before {
  content: "â–¶";
  float: left;
}