Flexbox and pseudo-elements

by bc_rikko

HTML

<h1 class="flex">Title styling</h1>

<!--
<div class="flex">
  <h1 class="flex-item">Title styling</h1>
</div>
-->

CSS

.flex {
  display: flex;
  align-items: center;
}

.flex::before,
.flex::after {
  display: block;
  content: ' ';
  
  flex-grow: 1;
  margin: 0 1em;
  height: 2px;
  
  background-color: #9F9F9F;
}