Text Divider - CSS

Use Flexbox to create a cool and responsive text divider on your design. 

Note: --text-divider-gap is the variable to control spacing between the text and the lines.

DEMO

TEXT TITLE

HTML

<div class="text-divider">TEXT TITLE</div>

CSS

.text-divider {
  display: flex;
  align-items: center;
  --text-divider-gap: 1.5rem;
  color: green;
}

.text-divider::before, .text-divider::after {
  content: "";
  height: 1px;
  background-color: silver;
  flex-grow: 1;
}

.text-divider::before {
  margin-right: var(--text-divider-gap);
}

.text-divider::after {
  margin-left: var(--text-divider-gap);
}