<div class="text-divider">Text divider</div>
// 🐞 codyhouse.co
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  padding: 1em;
}

.text-divider {
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --text-divider-gap: 1rem;
  
  &::before, &::after {
    content: '';
    height: 1px;
    background-color: silver;
    flex-grow: 1;
  }
  
  &::before {
    margin-right: var(--text-divider-gap);
  }

  &::after {
    margin-left: var(--text-divider-gap);
  }
}
View Compiled

External CSS

  1. https://codepen.io/codyhouse/pen/oNxLjqp
  2. https://unpkg.com/codyhouse-framework/main/assets/css/style.css

External JavaScript

This Pen doesn't use any external JavaScript resources.